ol 要素序列リストを表す

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

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

ol 要素の仕様

カテゴリ

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

コンテンツモデル
  • 0個以上の li 要素、およびスクリプト支援要素
この要素を使用できる文脈

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

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

詳細説明

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

属性 概要
reversed 属性 reversed 属性は論理属性です。この属性が指定されると、順序が逆になっている序列リストとなります。つまり項目番号が降順となります。
start 属性 一番最初の項目に付ける番号を指定します。それをスタートの番号として、通常は昇順、reversed 属性が指定されている場合は降順に番号が振られます。値は半角の算用数字のみ指定可能です。
type 属性 各項目に表示されるリストマーカーの形式を指定します。初期値は算用数字です。CSS の list-style-type プロパティなどで指定することが多いですが、type 属性でも指定可能です。

type 属性

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

属性値 概要
type="1" 算用数字のリストマーカーとなります。
type="a" 小文字、半角アルファベットのリストマーカーとなります。a ~ z までリストマーカーが与えられた後は、ba ~ bz、ca ~ cz と続きます。
type="A" 大文字、半角アルファベットのリストマーカーとなります。A ~ Z までリストマーカーが与えられた後は、BA ~ BZ、CA ~ CZ と続きます。
type="i" 小文字、ローマ数字のリストマーカーとなります。
type="I" 大文字、ローマ数字のリストマーカーとなります。
実際の表示サンプル

対応するブラウザでは下記にそれぞれの 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>

主要ブラウザの対応

IE11
Edge(EdgeHTML)
Edge(Chromium)
Chrome
Firefox
Safari
iOS Safari
Android Chrome

仕様書の該当箇所

4.4.5 The ol element

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

用途から HTML5 の要素を逆引きできます。

テキストに対する意味づけを行いたい
テキストの編集を示したい
改行や折り返しを指定したい
上付きや下付きを指定したい
テキストの書字方向を制御したい
テキストにルビをふりたい
箇条書きなどリストを表したい
セクションを定義したい
コンテンツをグループ化したい
画像や映像などを埋め込みたい
スクリプトやスタイルを埋め込みたい
フォーム関連の要素
テーブル関連の要素
ドキュメントにメタデータを付与したい
インタラクティブな要素
その他

このページの上部へ