ol 要素序列リストを表す

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

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

さらに詳細な説明を見る

サンプルソースを見る

ol 要素の仕様

カテゴリ

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

コンテンツモデル
この要素を使用できる文脈

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

この要素で使用できる属性
DOM インタフェース
interface HTMLOListElement : HTMLElement {
           attribute boolean reversed;
           attribute long start;
           attribute DOMString type;
};

詳細説明

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>

W3C HTML5 仕様書

4.5.5 The ol element