<ol>順序付きリスト

<ol>タグは、順序に意味があるリスト(ordered list)を表します。 リストの個々の項目は<li>タグで指定します。 また順序に意味があるというのは、何らかのランキングや順番などのように、何らかの意図・意味があって、その順番に並ぶ事で機能しているリストという意味です。

順序を表す必要がないリストの場合は、<ul>タグを使用します。

なおli要素の子要素として<ol>~</ol>を配置する場合、上下のマージンがなくなります。

HTML5での変更点

HTML5では、HTML4.01で非推奨だったstart属性、type属性が再び導入されたほか、reversed属性が追加されました。 reversed属性を指定すると、リストの番号順を降順(逆の順序)にする事ができます。

またstart属性では、リストの開始番号を指定することができます。

type属性では、各リストのマーカーの種類を指定でき、算用数字（1,2,3）、アルファベット小文字（a,b,c）、アルファベット大文字（A,B,C）、ローマ数字小文字（ⅰ,ⅱ,ⅲ）、 ローマ数字大文字（Ⅰ,Ⅱ,Ⅲ）などにする事ができます。 ですが特別な事情がない限りはtype属性の代わりに、cssのlist-style-typeプロパティを使用した方がいいでしょう。

なおHTML5のol要素ではcompact属性が廃止されています。

書式

  • <ol 属性="値">～</ol> ……… 順番を表すリストを表示

属性

reversed="" リスト項目の番号を逆順で表示する
start="" リストの開始番号を整数値で指定する
type="" リストマーカーの種類を指定する
  • 1・・・・10進数(1, 2, 3, 4, 5…)
  • a・・・・英小文字(a, b, c, d, e…)
  • A・・・・英大文字(A, B, C, D, E…)
  • i・・・・ローマ数字小文字(i, ii, iii, iv, v…)
  • I・・・・ローマ数字大文字(I, II, III, IV, V…)

使用した時の例

<ol>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>

<ol reversed="reversed">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>

<ol start="10">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>

<ol type="i">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>

リストに階層を持たせたい場合は下記のように記述します。

<ol>
<li>リスト1</li>
<li>リスト2
  <ol>
    <li>リスト2-1</li>
    <li>リスト2-2</li>
    <li>リスト2-3</li>
  </ol>
</li>
<li>リスト3</li>
</ol>

ブラウザ上の表示例

  1. リスト1
  2. リスト2
  3. リスト3
  1. リスト1
  2. リスト2
  3. リスト3
  1. リスト1
  2. リスト2
  3. リスト3
  1. リスト1
  2. リスト2
  3. リスト3
  1. リスト1
  2. リスト2
    1. リスト2-1
    2. リスト2-2
    3. リスト2-3
  3. リスト3

対応ブラウザなどのデータ

形式 <ol>～</ol> カテゴリ フローコンテンツ, パルパブルコンテンツ
親要素 フローコンテンツが期待される場所 子要素 0個以上のli要素
開始タグ 必須 終了タグ 必須
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~