リスト

リストは、関連する情報をまとめて表示するのに便利な要素です。HTMLでは、順序なしリストと順序ありリストの2種類のリストがあります。

順序なしリスト

順序なしリストは、順序に意味がない項目を表示するのに使用します。各項目の先頭にはマーカー（通常は黒丸）が付きます。順序なしリストは、<ul>要素で表され、各項目は<li>要素で表します。

See the Pen 順序なしリスト by sumi (@mesa2a) on CodePen.

順序ありリスト

順序ありリストは、順序に意味がある項目を表示するのに使用します。各項目の先頭には番号やアルファベットなどの順序を表すマーカーが付きます。順序ありリストは、<ol>要素で表され、各項目は<li>要素で表します。

<ol>要素には、type属性を使って、マーカーの種類を指定できます。type属性の値には、以下のようなものがあります。

• 1（デフォルト）：数字（1、2、3…）
• a：小文字のアルファベット（a、b、c…）
• A：大文字のアルファベット（A、B、C…）
• i：小文字のローマ数字（i、ii、iii…）
• I：大文字のローマ数字（I、II、III…）

See the Pen 順序ありリスト by sumi (@mesa2a) on CodePen.

リストのネスト

リストは、他のリストの中にネストさせることができます。これにより、階層構造を表現できます。

See the Pen リストのネスト by sumi (@mesa2a) on CodePen.

ネストされたリストは、親のリスト項目の中に記述します。ネストの深さに制限はありませんが、深くなりすぎると読みにくくなるので、適度な深さに留めることが大切です。

練習問題

以下のテキストを適切なリストを使ってマークアップしてください。

See the Pen リストの練習問題 by sumi (@mesa2a) on CodePen.

<ul>
  <li>朝
    <ol>
      <li>起床</li>
      <li>朝食</li>
      <li>歯磨き</li>
    </ol>
  </li>
  <li>昼
    <ol>
      <li>昼食</li>
      <li>昼休み</li>
    </ol>
  </li>
  <li>夜
    <ol>
      <li>夕食</li>
      <li>入浴</li>
      <li>就寝</li>
    </ol>
  </li>
</ul>

まとめ

本記事では、HTMLのリストについて詳しく学びました。リストには、順序なしリストと順序ありリストの2種類があり、情報を整理して表示するのに便利な要素です。以下のポイントを押さえておきましょう。

• 順序なしリストは、<ul>要素で表され、順序に意味がない項目を表示するのに使用する
• 順序ありリストは、<ol>要素で表され、順序に意味がある項目を表示するのに使用する
• リスト項目は、<li>要素で表す
• 順序ありリストのマーカーの種類は、type属性で指定できる
• リストは、他のリストの中にネストさせることができる
• リストを適切に使用することで、情報を整理し、読みやすく表示することができる