<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="" | リストマーカーの種類を指定する
|
使用した時の例
<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
- リスト2
- リスト3
- リスト1
- リスト2
- リスト3
- リスト1
- リスト2
- リスト3
- リスト1
- リスト2
- リスト3
- リスト1
- リスト2
- リスト2-1
- リスト2-2
- リスト2-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~ |