HTMLで点なしリスト作成！簡単な5ステップと応用例 – Japanシーモア

HTMLで点なしリスト作成！簡単な5ステップと応用例

HTMLで作成する点なしリストのサンプルイメージHTML
2023.04.06
この記事は約5分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

このサービスは複数のSSPによる協力の下、運営されています。

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、HTMLで点なしリストを作成できるようになります。

●HTMLで点なしリスト(ul)を作成する方法

○基本的な使い方

  1. ulタグを使用
  2. liタグでリスト項目を追加
  3. CSSでリストスタイルを変更
  4. リストのインデントを調整
  5. 応用例とサンプルコード

●ulタグとは

○ulタグの基本

ulタグは、HTMLで順序のないリスト（点なしリスト）を作成するためのタグです。

ulは”Unordered List”の略で、順序がないリストを意味します。

●ulタグの使い方

○サンプルコード1：基本的な点なしリスト作成

<!DOCTYPE html>
<html>
<head>
<style>
  ul {
    list-style-type: none;
  }
</style>
</head>
<body>

<ul>
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
</ul>

</body>
</html>

●CSSでリストスタイルを変更

○サンプルコード2：リストマーカーを変更する

<!DOCTYPE html>
<html>
<head>
<style>
  ul {
    list-style-type: none;
  }
  li::before {
    content: "■";
    color: red;
  }
</style>
</head>
<body>

<ul>
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
</ul>

</body>
</html>

●リストのインデントを調整

○サンプルコード3：インデントを調整する

<!DOCTYPE html>
<html>
<head>
<style>
  ul {
    list-style-type: none;
    padding-left: 20px;
  }
</style>
</head>
<body>

<ul>
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
</ul>

</body>
</html>

●応用例とサンプルコード

○サンプルコード4：ネストした点なしリスト作成

<!DOCTYPE html>
<html>
<head>
<style>
  ul {
    list-style-type: none;
    padding-left: 20px;
  }
</style>
</head>
<body>

<ul>
  <li>リスト項目1
    <ul>
      <li>サブリスト項目1</li>
      <li>サブリスト項目2</li>
    </ul>
  </li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
</ul>

</body>
</html>

○サンプルコード5：水平方向に並べる点なしリスト作成

<!DOCTYPE html>
<html>
<head>
<style>
  ul {
    list-style-type: none;
    padding: 0;
    display: flex;
  }
  li {
    margin-right: 20px;
  }
</style>
</head>
<body>

<ul>
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
</ul>

</body>
</html>

●注意点と対処法

  1. ulタグの直接の子要素はliタグのみにする
  2. ulタグをネストする場合は、親のliタグ内に入れる

●カスタマイズ方法

  1. リストマーカーの変更
  2. インデントの調整
  3. リストのスタイルや配置の変更

まとめ

この記事では、HTMLで点なしリストを作成する方法と応用例を初心者向けに詳しく解説しました。

サンプルコードを参考に、点なしリストの作成やカスタマイズを試してみてください。