<ol> - 順序付きリスト

■ 概要

項  目説  明
記述形式 <ol>~</ol>
対応ブラウザー H2+ / e2+ / N2+ / Fx1+ / Op6+ / Ch1+ / Sa1+
種  類
(カテゴリー)
フロー・コンテンツ
パルパブル・コンテンツ(1個以上の li要素を子要素にもつとき)  
置ける場所 フロー・コンテンツが記入できる場所
内包要素
(コンテンツ・モデル)
0個以上の li要素
(コンテンツ・モデル: 直接指定

■ 解説

<ol> は Ordered List(順序のあるリスト)の略です。 <ul> は順序の無いリストを記述しますが,<ol> は順序のあるリストを記述します。 リストの各項目は <li> で記述します。

ブラウザーの表示では,通常,各項目の先頭に連番の数字が付いて,リスト全体がインデント(字下げ)された状態になります。

■ 属性

種  類名  称
【固有属性】 reversed *, start, type
【グローバル属性】 accesskeyclasscontenteditable * dir
hidden *idlangspellcheck *style
tabindextitletranslate *
【ARIA role属性】
指定可能な値 (役割)
list (既定の役割のため指定対象外),
directorylistboxmenumenubarpresentation
tablisttoolbar,または,tree
【ARIA aria-* 属性】
指定可能なもの
ARIA グローバル状態とプロパティ
指定可能な役割の任意の状態とプロパティ   
備  考 HTML5 では,compact属性 は廃止されました
ので注意が必要です。

reversed属性
番号付けの逆順を指定します。 この場合,start属性の指定が前提となります。 ただし,現在のところ対応しているブラウザーは少ないようです。

start属性
リスト項目の開始番号を指定します。 この属性を指定しない場合は,"1" や "a" などが開始番号になります。

type属性
"a","A","i","I" など,番号表記の種類を指定します。 省略した場合は,既定のアラビヤ数字による番号表示となります。

■ CSSプロパティ

種  類名  称
【よく使うもの】 colorbackground-colorfontfont-sizefont-family

■ 使用例

HTMLソース
HTML
<body> ~ </body>
<ol>
  <li>Internet Explorer </li>
  <li>Netscape Navigator </li>
  <li>Firefox</li>
  <li>Opera</li>
</ol>
<ol type="a">
  <li>Internet Explorer </li>
  <li>Netscape Navigator </li>
  <li>Firefox</li>
  <li>Opera</li>
</ol>
<ol type="A">
  <li>Internet Explorer </li>
  <li>Netscape Navigator </li>
  <li>Firefox</li>
  <li>Opera</li>
</ol>
<ol type="i">
  <li>Internet Explorer </li>
  <li>Netscape Navigator </li>
  <li>Firefox</li>
  <li>Opera</li>
</ol>
<ol start="3" type="I">
  <li>Internet Explorer </li>
  <li>Netscape Navigator </li>
  <li>Firefox</li>
  <li>Opera</li>
</ol>
<ol start="5" reversed>
  <li>Internet Explorer </li>
  <li>Netscape Navigator </li>
  <li>Firefox</li>
  <li>Opera</li>
</ol> 

ブラウザー 表示例
  1. Internet Explorer
  2. Netscape Navigator
  3. Firefox
  4. Opera
  1. Internet Explorer
  2. Netscape Navigator
  3. Firefox
  4. Opera
  1. Internet Explorer
  2. Netscape Navigator
  3. Firefox
  4. Opera
  1. Internet Explorer
  2. Netscape Navigator
  3. Firefox
  4. Opera
  1. Internet Explorer
  2. Netscape Navigator
  3. Firefox
  4. Opera
  1. Internet Explorer
  2. Netscape Navigator
  3. Firefox
  4. Opera

■ 備考

type属性 により指定できる番号表記の種類(リスト・マーカー)はかなり限定的なものですが, CSS3 の list-style-type プロパティ による指定を用いると, より多くの番号表記の形式が指定可能です。