HOME / WEB関連知識のスキルアップ / HTMLクイック･リファレンス / HTML5（目的別） / <ol>

HTML5  <ol>

<ol>タグはordered listの略で、順序のあるリストを表示する際に使用します。 リスト項目は、<li>タグで指定します。
<ol>タグで作成されるのは順序のあるリストなので、リスト項目の順序を変えると文書の意味が変わってしまうはずです。 順序のないリストを作成する際には<ul>タグを使用してください。

■HTML4.01からHTML5へのバージョンアップによる変更点

HTML4.01では、ol要素にはtype属性が用意されており、リストの先頭記号（リストマーカー）の種類として、 算用数字（1,2,3,…）・アルファベット小文字（a,b,c,…）・ アルファベット大文字（A,B,C,…）・ローマ数字小文字（ⅰ,ⅱ,ⅲ,…）・ ローマ数字大文字（Ⅰ,Ⅱ,Ⅲ,…） を指定することができました。
HTML5では、ol要素のtype属性は廃止されています。
リストマーカーのスタイルを指定する際には、 CSSのlist-style-typeプロパティを使用してください。
例えば、大文字のローマ数字（Ⅰ,Ⅱ,Ⅲ,…）なら以下のように記述します。

■使用例

HTMLソース
<ol style="list-style-type: decimal​">
<li>いちご</li>
<li>人参</li>
<li>サンダル</li>
</ol>
↓↓↓
リンク先のページで表示を見ることができます
また、HTML4.01では、ol要素のstart属性は非推奨とされていましたが、HTML5では非推奨ではなくなっています。 start属性を使用すると、リストの開始番号を整数で指定することができます。
HTML5ではol要素に新しくreversed属性が追加されています。 reversed属性を使用すると、リストの並び順を逆順（大きい順）にすることができます。 reversed属性は、旧いバージョンのブラウザではサポートされていないので注意してください。

■属性

reversed属性
　　　リストの並び順を降順（大きい順）にする
start属性
　　　リストの開始番号を整数で指定

■使用例

HTMLソース
<ol>
<li>いちご</li>
<li>人参</li>
<li>サンダル</li>
</ol>

<ol start="5">
<li>ゴリラ</li>
<li>ロケット</li>
<li>菜の花</li>
</ol>

<ol reversed="reversed" start="10">
<li>ジュゴン</li>
<li>鯨</li>
<li>蜂</li>
</ol>
↓↓↓
リンク先のページで表示を見ることができます