HTMLの順序付きリストとは

HTMLでの順序付きリスト（Ordered List）は、項目の順序が重要なリストを作成する際に使用されます。このタイプのリストは <ol> タグで定義され、各項目は <li>（List Item）タグで囲まれます。

順序付きリストの基本的な構文

<ol>
  <li>最初の手順</li>
  <li>次の手順</li>
  <li>最後の手順</li>
</ol>

この構造により、ブラウザはリスト項目を番号付きで表示します。

順序付きリストにはいくつかの属性を追加できますが、HTML5ではスタイルを指定するためにCSSを使用することが推奨されています。ただし、start、reversed、type などの属性を使ってリストの振る舞いを変更できます。

CSSを使用して順序付きリストの見た目をカスタマイズすることができます。例えば、リストマーカーのタイプを変更したり、インデントを調整したりできます。

ol {
  list-style-type: upper-roman; /* リストマーカーをローマ数字に変更 */
  margin-left: 20px; /* リストの左マージンを設定 */
  padding-left: 0; /* リストの左パディングを削除 */
}

順序付きリストは、手順、ランキング、イベントのタイムラインなど、順序を持つ情報の提示に適しています。

順序付きリストは入れ子（ネスト）することが可能で、サブリストを作成するために他の <ol> 要素を <li> 要素の中に含めることができます。

<ol>
  <li>手順1
    <ol>
      <li>サブ手順1.1</li>
      <li>サブ手順1.2</li>
    </ol>
  </li>
  <li>手順2</li>
</ol>

このように順序付きリストを入れ子にすることで、より複雑な階層的なリストを表現することができます。各サブリストは独自の番号付けやマーカータイプを持つことができます。