HTMLのリストタグを徹底解説！活用方法から実例まで！

順序なしリスト　ulタグ

サンプルコード

順序なしリストは、リストの各項目に箇条書きとして表示します。
順序が重要でない場合に使用します。

<ul>
  <li>リンゴ</li>
  <li>バナナ</li>
  <li>オレンジ</li>
</ul>

• リンゴ
• バナナ
• オレンジ

ユースケース

順序なしリストは、特徴のリスト、製品リスト、チェックリストなどに適しています。
なにかを箇条書きにする時に使用することが多いです。

順序付きリスト　olタグ

サンプルコード

順序付きリストは、リストの各項目に番号を付けて表示します。
一般的に、手順やランキングなど、項目に順序が必要な場合に使用します。

<ol>
  <li>ステップ1</li>
  <li>ステップ2</li>
  <li>ステップ3</li>
</ol>

1. ステップ1
2. ステップ2
3. ステップ3

ユースケース

順序付きリストは、チュートリアルやステップガイド、タスクの優先順位付けに役立ちます。

定義リスト　dlタグ

サンプルコード

定義リストは、用語とその定義をペアで表示します。
主（タイトル）と従（本文）のペアで構成されます。

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Languageの略</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheetsの略</dd>
</dl>

HTML

HyperText Markup Languageの略

CSS

Cascading Style Sheetsの略

ユースケース

定義リストは、用語集、FAQ、データペアの表示に役立ちます。

入れ子リスト

リストタグを入れ子にして、複雑なリスト構造を作成できます。

<ul>
  <li>果物
    <ul>
      <li>リンゴ</li>
      <li>バナナ</li>
    </ul>
  </li>
  <li>野菜
    <ul>
      <li>キャベツ</li>
      <li>ニンジン</li>
    </ul>
  </li>
</ul>

• 果物
  • リンゴ
  • バナナ
• 野菜
  • キャベツ
  • ニンジン

カスタムスタイルの適用

CSSを使用してリストのスタイルをカスタマイズできます。

<ul class="custom-list">
  <li>カスタムアイテム1</li>
  <li>カスタムアイテム2</li>
</ul>

ul.custom-list {
  list-style-type: square;
  color: #0073e6;
}

• カスタムアイテム1
• カスタムアイテム2