リスト

リストとは情報を整理するために項目ごとにグループ化するものです。HTMLでは、順序なしリスト、順序付きリスト、定義リストの三種類があります。

順序なしリスト

順序なしリストは、順序がないリストで、項目の前に黒丸を表示します。

順序なしリストの例

順序なしリストのコードの例と表示の例は以下のようになります。

<ul>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ul>

• 項目1
• 項目2
• 項目3

ulタグで全体を囲み、liタグで要素を列挙します。

順序ありリスト

順序ありリストは、順序があるリストで、項目の前に数字を表示します。

順序ありリストの例

順序ありリストのコードの例と表示の例は以下のようになります。

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

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

olタグで全体を囲み、liタグで要素を列挙します。

定義リスト

定義リストとは用語や項目とその説明をセットにしてリスト表示するものです。

定義リストの例

定義リストのコードの例と表示の例は以下のようになります。

<dl>
    <dt>HTML</dt>
    <dd>ウェブページの構造を作るマークアップ言語。</dd>
    <dt>CSS</dt>
    <dd>ウェブページのスタイルやデザインを指定する言語。</dd>
</dl>

HTML

ウェブページの構造を作るマークアップ言語。

CSS

ウェブページのスタイルやデザインを指定する言語。

dlタグで全体を囲み、dtタグで要素の見出しを、ddタグで要素の説明を指定します。

リストの入れ子（ネスト）

リストの中に別のリストを入れ子にすることもできます。

リストの入れ子の例

リストの入れ子のコードの例と表示の例は以下のようになります。

<ul>
    <li>項目1</li>
    <li>項目2
        <ul>
            <li>サブ項目2-1</li>
            <li>サブ項目2-2</li>
        </ul>
    </li>
    <li>項目3</li>
</ul>

• 項目1
• 項目2
  • サブ項目2-1
  • サブ項目2-2
• 項目3

以上、リストに関して解説しました。リストはうまく活用することで情報の整理に役立ちます。