<ol>要素

<ol>要素の定義

HTMLで「一覧」「箇条書き」を表現するためには、<ul> ・ <ol> ・ <li> の各要素を組み合わせて表現します。
そのうち、<ol>要素は順序性のあるリスト（番号付きリスト）として使います。
<ol>要素は”ordered list”から来ています。

子要素として使用できるもの

0個以上の <li> 要素、または <script> 要素や <template> 要素。
また、<li> 要素の子孫として、更に <ul> 要素や<ol>要素をもたせて、階層のあるリストを表現することも可能。

親要素として使えるもの

フローコンテンツを受け入れるすべての要素。

許可されている ARIA ロール

directory, group, listbox, menu, menubar, radiogroup, tablist, toolbar, tree, presentation

DOMインターフェース

HTMLOListElement

属性

グローバル属性が指定できます。

reversed

この属性を指定すると、項目を逆順に並べることが出来ます。

start

リストの開始番号を指定します。type属性やCSSの list-style-type属性を使うことで、番号には数字以外も使えますが、start属性の値には必ず数値を指定します。
例えば、アルファベットを番号に使用し、”E”から始めたい、という場合には start属性に”5”を指定します。

type

順番を数字で表すか、ローマ数字やアルファベットで表すかを指定します。

• “1” （デフォルト）：数字で表します。（1,2,3,…）
• “a”：英小文字で表します。（a,b,c,…）
• “A”：英大文字で表します。（A,B,C,…）
• “i”：小文字のローマ数字で表します。（i,ii,iii,…）
• “I”：大文字のローマ数字で表します。（I,II,III,…）

サンプル

シンプルなリスト

See the Pen wLmJbv by Masahiko Iwakiri (@m-iwakiri) on CodePen.

リストの入れ子の例

See the Pen gNjmVz by Masahiko Iwakiri (@m-iwakiri) on CodePen.

番号の操作いろいろ

See the Pen ZdjKbY by Masahiko Iwakiri (@m-iwakiri) on CodePen.