HTML5における<ol>タグの使い方

<ol>タグは番号付きのリストを作成する際に使用するタグです。今回は、HTML5における<ol>タグの使い方をご紹介します。

HTML5における<ol>タグの使い方

<ol>は番号付きのリストが簡単に作成できるタグです。番号付というのは、ただ番号が付いているだけでなく、順位があるというのが正しい意味です。<ol>要素の中に、<li>タグでアイテムを追加していくだけで、番号付のリストが作成できます。

<ol>
  <li>赤</li>
  <li>青</li>
  <li>黄</li>
</ol>
スクリーンショット 2016-06-28 11.11.43

表示サンプル

また、start属性を使用することで、一番最初のカウントが開始される数字を指定することができます。下記はサンプルコードです。

<ol start="10">
  <li>赤</li>
  <li>青</li>
  <li>黄</li>
</ol>
スクリーンショット 2016-06-28 11.38.45

表示サンプル

開始を10に指定したので、10から順に数字が振られています。

またreversed属性を使用すると、表示される数字の順序を逆から指定できます。

<ol reversed>
  <li>赤</li>
  <li>青</li>
  <li>黄</li>
</ol>
スクリーンショット 2016-06-28 11.40.33

表示サンプル

画像のように大きい数字が上から振られます。

この他にも、<li>要素にvalue属性を使って途中で数字を変えたり、CSSを使って数字の種類を変えたりすることができます。場合によってカスタマイズして使用しましょう。


イベント

購読

平日・毎朝更新中