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