HTML

ol 要素

　ol要素「Orederd List（順序ありのリスト）」の略で、順序に意味を持つリストを表します。リストの順序が変わってしまうと、意味が変わってしまうようなリストに使います。順序に意味を持たないリストには、ol要素を使うべきではありません。その場合は、ul要素を使います。

リスト項目は、li要素を使ってマークアップします。

ol 要素の概要

カテゴリー

フロー・コンテンツ

コンテンツ･モデル

0個以上の li 要素

利用可能な場所

フロー・コンテンツが期待される場所

タグの省略

不可。開始と終了タグの両方が必要。

要素固有のコンテンツ属性

reversed

指定があれば降順を表します。指定がなければ昇順を表します。

start

最初の項目の順番を表します。指定の番号から順に各項目に番号が付与されます。

標準的なスタイル

ol {
	display: block;
	margin-top: 1em;
	margin-bottom: 1em;
	padding-left: 40px;
	list-style-type: decimal;
}

使用例

<p>のぞみ229号の停車駅（停車順）</p>
<ol>
	<li>東京</li>
	<li>品川</li>
	<li>新横浜</li>
	<li>名古屋</li>
</ol>

　この例は、新幹線の停車駅を停車順に並べたものです。停車順と言う順序を持っているため、ol 要素が適しています。

　特にスタイルを指定しなければ、ブラウザには次のように表示されます。

start 属性

　start属性は、順序の開始番号を定義します。開始番号は整数値でなければいけません。

<p>のぞみ229号の停車駅（停車順）</p>
<ol start="4">
	<li>名古屋</li>
	<li>京都</li>
	<li>新大阪</li>
</ol>

　この例では、ol要素の start属性に "4" を指定しています。この場合、ブラウザでは、4から順に番号を割り振ります。

　start属性には負の整数値を指定する事も可能です。負の整数値を指定した場合、割り振られる番号はどんどん0に近づき、0を超えると正の整数値として増えていきます。

<p>のぞみ229号の停車駅（停車順）</p>
<ol start="-3">
	<li>東京</li>
	<li>品川</li>
	<li>新横浜</li>
	<li>名古屋</li>
	<li>京都</li>
	<li>新大阪</li>
</ol>

reversed 属性

　reversed属性は、順番を降順にする論理属性です。もし、指定すると、順番が反対になります。この属性は HTML5で新たに導入されました。reversed属性が指定された順序付きリストの事を、カウントダウン・リストと呼ぶこともあります。

<p>海外ドラマ　人気トップ 5</p>
<ol reversed="reversed">
	<li>フレンズ</li>
	<li>24</li>
	<li>シンプソンズ</li>
	<li>スターゲート　アトランティス</li>
	<li>スターゲート　SG-1</li>
</ol>

　ブラウザが対応した場合は、次のようにレンダリングされる事が想定されます。

　reversed属性を指定する事で、項目の表示順は変わらない点に注意してください。この属性で実現するのは、順番を表す番号を降順に割り振るという点だけです。これと同じ結果を求めるには、以前は次のように、すべての li要素に value属性を指定するしかありませんでした。

<p>海外ドラマ　人気トップ 5</p>
<ol>
	<li value="5">フレンズ</li>
	<li value="4">24</li>
	<li value="3">シンプソンズ</li>
	<li value="2">スターゲート　アトランティス</li>
	<li value="1">スターゲート　SG-1</li>
</ol>

　このマークアップは項目数が少なければ問題ありませんが、多くなれば、それだけマークアップが面倒です。さらに、このマークアップは、HTML4.01や XHTML1.0の Strict DOCTYPEでは非準拠でした。HTML5では、このような降順の順序リストを簡単にマークアップできるようにするため、reversed属性が新たに設けられたのです。

　reversed属性は、ol要素の start属性と、li要素の value属性を組み合わせて使う事も想定されています。この場合、ol要素の start属性に指定された数値からのカウントダウンとなります。そして、li要素の value属性が見つかると、順序番号が、その数値に飛び、そこからカウントダウンが始まる事になります。

<p>映画　人気トップ　100 カウントダウン</p>
<ol reversed="reversed" start="100">
	<li>ワルキューレ</li>
	<li>ニュー・シネマ・パラダイス</li>
	<li>トワイライト</li>
	<li value="3">トランスフォーマー／リベンジ</li>
	<li>G.I.ジョー</li>
	<li>ハリー・ポッターと謎のプリンス</li>
</ol>