ol 要素は序列リストを表します。序列リストとは、項目の順序に意味があるリストのことです。

例えば、作業リストで、その実行順に意味があるものや、ランキングなど順位が付いたものなどが当てはまります。

ol 要素の仕様

カテゴリ

• パルパブル・コンテンツ
• フロー・コンテンツ

子要素として 1個以上の li 要素を持つ場合はパルパブル・コンテンツ

コンテンツモデル

• 0個以上のli 要素、およびスクリプト支援要素

この要素を使用できる文脈

フロー・コンテンツが期待される場所

この要素で使用できる属性

• グローバル属性
• reversed 属性
• start 属性
• type 属性

詳細説明

ol 要素に指定可能な属性は下記の通りです。

type 属性

ol 要素に type 属性を指定することでリストマーカーの形式を指定することができます。指定できる値は下記の通りです。

実際の表示サンプル

対応するブラウザでは下記にそれぞれの type 属性値ごとの序列リストが表示されます。

type="1" のサンプル

1. リスト項目-1
2. リスト項目-2
3. リスト項目-3
4. リスト項目-4
5. リスト項目-5

type="a" のサンプル

1. リスト項目-1
2. リスト項目-2
3. リスト項目-3
4. リスト項目-4
5. リスト項目-5

type="A" のサンプル

1. リスト項目-1
2. リスト項目-2
3. リスト項目-3
4. リスト項目-4
5. リスト項目-5

type="i" のサンプル

1. リスト項目-1
2. リスト項目-2
3. リスト項目-3
4. リスト項目-4
5. リスト項目-5

type="I" のサンプル

1. リスト項目-1
2. リスト項目-2
3. リスト項目-3
4. リスト項目-4
5. リスト項目-5

ol 要素の入れ子

ol 要素のコンテンツモデルは、0個以上の li 要素となります。つまり、li 要素以外を直接の子要素とすることはできませんので、ol 要素を入れ子にする場合でも、ol 要素の直下に別の ol 要素を置くことはできません。必ず、li 要素の子要素として使用する必要があります。詳しくはサンプルソースをご覧ください。

ol 要素のサンプルソース

<p> 必ず下記の順番で材料を加えてください。 順番を守らないと大変なことになります。</p><ol> <li>小麦粉 （10グラム）</li> <li>塩 （小さじ1）</li> <li>砂糖 （大さじ1）</li> <li>醤油 （小さじ1）</li></ol>

<!-- リストを入れ子にした例 --><ol> <li>品川駅に集合します  <ol>   <li>点呼をとります</li>   <li>参加申し込みをして頂きます</li>   <li>ゼッケンを受け取ります</li>   <li>待機列にゼッケン番号順に並んでください</li>  </ol> </li> <li>品川駅を出発し、大崎駅に向かいます</li> <li>大崎駅到着後、下記の物をお渡しします  <ul>   <li>お弁当</li>   <li>お茶</li>   <li>お手ふき</li>   <li>お菓子</li>  </ul> </li></ol>

<p> 好きな映画ランキングを 10位から順に</p><ol reversed="reversed"> <li>バック・トゥ・ザ・フューチャー</li> <li>インディージョーンズ</li> <li>マトリックス</li> <li>スターウォーズ</li> …省略…</ol>

<p> 操作手順を 3番目から繰り返しましょう</p><ol start="3"> <li>ふたを開けます</li> <li>中身を取り出します</li> <li>お湯を入れます</li></ol>

主要ブラウザの対応

関連する要素

• dd 要素
• dl 要素
• dt 要素
• li 要素
• ul 要素

仕様書の該当箇所

• 4.4.5 The ol element

用途から目的の要素を探す