<ol></ol>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 フロー・コンテンツ / 内容に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 値は省略可能
  • 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要素の子要素として配置した場合も上下のマージンがなくなります。
HTML5における変更点
  • reversed属性が追加されました。
  • type属性とstart属性が非推奨ではなくなりました。
  • compact属性が廃止されました。

使用例


<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