<ol>タグは番号付きのリストを作成する際に使用するタグです。今回は、HTML5における<ol>タグの使い方をご紹介します。
HTML5における<ol>タグの使い方
<ol>は番号付きのリストが簡単に作成できるタグです。番号付というのは、ただ番号が付いているだけでなく、順位があるというのが正しい意味です。<ol>要素の中に、<li>タグでアイテムを追加していくだけで、番号付のリストが作成できます。
1 2 3 4 5 |
<ol> <li>赤</li> <li>青</li> <li>黄</li> </ol> |
![スクリーンショット 2016-06-28 11.11.43](https://data.uxmilk.jp/wp-content/uploads/2016/06/0f1fe0f1d54fbf40025605da2700ae3e.png)
表示サンプル
また、start属性を使用することで、一番最初のカウントが開始される数字を指定することができます。下記はサンプルコードです。
1 2 3 4 5 |
<ol start="10"> <li>赤</li> <li>青</li> <li>黄</li> </ol> |
![スクリーンショット 2016-06-28 11.38.45](https://data.uxmilk.jp/wp-content/uploads/2016/06/5f582909fbb0f779c0d6f3fac89097b1.png)
表示サンプル
開始を10に指定したので、10から順に数字が振られています。
またreversed属性を使用すると、表示される数字の順序を逆から指定できます。
1 2 3 4 5 |
<ol reversed> <li>赤</li> <li>青</li> <li>黄</li> </ol> |
![スクリーンショット 2016-06-28 11.40.33](https://data.uxmilk.jp/wp-content/uploads/2016/06/b914b75580029de010494f2db543d3c4.png)
表示サンプル
画像のように大きい数字が上から振られます。
この他にも、<li>要素にvalue属性を使って途中で数字を変えたり、CSSを使って数字の種類を変えたりすることができます。場合によってカスタマイズして使用しましょう。