序列リストを表す

ol

< ol 【 オーダード・リスト 】 属性="属性値">〜</ol >

ol要素は序列リストを表します。序列リストとは、項目の順序に意味があるリストのことです。例えば、手順が決まった作業リストやランキングリストが当てはまります。

ol要素を入れ子にした階層構造を持つリストも作成できますが、ol要素の直下に別のol要素を置くことはできません。必ずli要素の子要素として使用する必要があります。

カテゴリー ・パルパブルコンテンツ
・フローコンテンツ
※子要素として1個以上のli要素を持つ場合はパルパブルコンテンツ
コンテンツモデル 0個以上のli要素
使用できる文脈 フローコンテンツが期待される場所
カテゴリーとコンテンツモデル

使用できる属性

reversed 【リバースド 】

ol要素におけるリストマーカーの順序を逆順にします。この属性が指定されると、項目番号が降順（大きい数から小さい数へ）になります。reversed属性は論理属性です。

start 【スタート 】

最初の項目に付ける番号を指定します。それをスタートの番号として、通常は昇順、reversed属性が指定されている場合は降順に番号が振られます。半角の算用数字のみ指定可能です。

type 【タイプ 】

リストマーカーの形式を指定します。指定できる値は以下の通りです。

1 「1」「2」「3」......といった算用数字で表します。
a 「a」「b」「c」......といった小文字の半角アルファベットで表します。「z」までリストマーカーが与えられた後は、「ba」～「bz」、「ca」～「cz」と続きます。
A 「A」「B」「C」......といった大文字の半角アルファベットで表します。「Z」までリストマーカーが与えられた後は、「BA」～「BZ」、「CA」～「CZ」と続きます。
i 「i」「ii」「iii」......といった小文字のローマ数字で表します。
I 「I」「II」「III」......といった大文字のローマ数字で表します。

グローバル属性

すべての要素で使用できる属性です。
グローバル属性とイベントハンドラ属性

サンプルコード

以下の例では、作業の手順を序列リストで表しています。

<ol>
  <li>カップの底にエスプレッソを注ぎます。</li>
  <li>スチームドミルクを加えます。</li>
  <li>フォームドミルクを加えます。</li>
</ol>

使用例降順のリストを作成する

<ol reversed="reversed"><li>~</li></ol>

通常、1から昇順に並べられるol 要素のリストですが、reversed="reversed"を指定することで最大の数値から降順に並べられるリストを表せます。

  <p>1月の人気メニューベスト3です。</p>
  <ol reversed="reversed">
    <li>カフェオレ</li>
    <li>自家製ブルーベリーソースのパンケーキ</li>
    <li>冬季限定モンブラン＆ドリンクセット</li>
  </ol>

使用例3からリストを開始する

<ol start="3"><li>~</li></ol>

start属性に任意の数値を属性値として指定すると、その番号からリストが開始されます。

<p>スポンジを作る手順を3番目から確認しましょう。</p>
<ol start="3">
  <li>バターと牛乳を混ぜます。</li>
  <li>全体がなじむまですばやく混ぜます。</li>
  <li>空気を抜いて、型に流し込みます。</li>
</ol>

関連記事