<ol></ol>

更新日
仕様 HTML Living Standard
分類 フロー・コンテンツ / 内容にli要素を含む場合：パルパブル・コンテンツ
利用場所 フロー・コンテンツが置ける場所
内容 li要素を0個以上 / スクリプトサポート要素

ol要素は、順序付きのリストを表します。リスト内の項目は、この要素内に配置するli要素で表すことになります。


<ol>
<li>リスト項目1</li>
<li>リスト項目2</li>
<li>リスト項目3</li>
</ol>
属性 値
任意属性
type="" リスト番号の種類 1 算用数字 （1 2 3 ...）（既定値）
a 小文字のアルファベット （a b c ...）
A 大文字のアルファベット （A B C ...）
i 小文字のローマ数字 （i ii iii ...）
I 大文字のローマ数字 （I II III ...）
start="" 開始番号 数値 任意の数字（既定値は 1 または項目数）
reversed 逆順序のリスト （reversed） 値は省略可能
  • type属性は、リスト番号の種類に重要な役割がある場合に使用します。見た目の表現のために変更したい場合は、CSSの list-style-type プロパティを使用してください。
  • start属性の既定値は、reversed属性が指定されていない場合は 1、指定されている場合はリストの項目数となります。

各属性の詳細については、下記のページを参考にしてください。

ol要素を使用すると、順序のあるリストを作成することができます。順序を必要としないリストの場合は、この要素ではなくul要素を使用します。

リストの入れ子

リストに階層を持たせたい場合は、次のようにli要素の中に別のol要素を配置します。（間違えやすい部分なので注意してください）

<ol>
<li>リスト項目1</li>
<li>リスト項目2

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

</li>
<li>リスト項目3</li>
</ol>

次のように、ul要素（順不同のリスト）を入れ子にすることもできます。

<ol>
<li>リスト項目1</li>
<li>リスト項目2

<ul>
<li>リスト項目2-A</li>
<li>リスト項目2-B</li>
<li>リスト項目2-C</li>
</ul>

</li>
<li>リスト項目3</li>
</ol>

要素のデフォルトスタイル

一般的なブラウザでは、この要素の上下に1em程度のマージン、左に40px程度のパディングが入ります。

  1. リスト項目1
  2. リスト項目2
  3. リスト項目3
  • li要素の子要素として配置した場合（入れ子にした場合）は、上下のマージンがなくなります。
  • 一部のブラウザでは、dd要素の子要素として配置した場合も上下のマージンがなくなります。
旧HTMLからの変更点
  • HTML5：compact属性が廃止され、reversed属性が追加されました。
  • HTML5：type属性とstart属性が非推奨ではなくなりました。

使用例


<ol>
<li>リスト項目1</li>
<li>リスト項目2</li>
<li>リスト項目3</li>
</ol>
表示例
  1. リスト項目1
  2. リスト項目2
  3. リスト項目3
ol要素を入れ子にした例

<ol>
<li>リスト項目1</li>
<li>リスト項目2

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

</li>
<li>リスト項目3</li>
</ol>
表示例
  1. リスト項目1
  2. リスト項目2
    1. リスト項目2-1
    2. リスト項目2-2
    3. リスト項目2-3
  3. リスト項目3
ul要素を入れ子にした例

<ol>
<li>リスト項目1</li>
<li>リスト項目2

<ul>
<li>リスト項目2-A</li>
<li>リスト項目2-B</li>
<li>リスト項目2-C</li>
</ul>

</li>
<li>リスト項目3</li>
</ol>
表示例
  1. リスト項目1
  2. リスト項目2
    • リスト項目2-A
    • リスト項目2-B
    • リスト項目2-C
  3. リスト項目3