HTML5の要素を使ってolタグの数字をカスタマイズする方法

HTMLにおいて、<ol><li>タグは順序付きのリストタグをして知られていますが、HTML5の実装に伴い新しい属性が追加されています。順序を降順にするreversed属性です。また、これまでHTML4やXHTMLでは非推奨であった、start属性が非推奨ではなくなりました。これについても解説します。

まずは普通にolタグを書いてみます。

こんな感じですね。
ブラウザ上での見た目は以下のようになると思います。

  1. やきそば
  2. たこやき
  3. いかめし
  4. すきやき
  5. とんかつ

olタグにstart属性を追加します。これにより好きな数字からリストを作ることができます。

ブラウザ上での見た目が以下の通り。
番号が7からスタートします。

  1. やきそば
  2. たこやき
  3. いかめし
  4. すきやき
  5. とんかつ

最後にreversed属性を使用して番号を降順にしてみます。

ブラウザ上での見た目は以下の通り。
番号が18からスタートし1つずつ減っていきます。

  1. やきそば
  2. たこやき
  3. いかめし
  4. すきやき
  5. とんかつ

以上です。たまにはこんなライトな話はいかがだったでしょうか。

実はHTML5からolタグを使うことなく、好きな要素に連番を振る方法が実装されています。ほんの少し込み入った話になるため、説明はまた別の機会とさせていただきます。


この記事をかいた人

ドレッド Webクリエイター

WordPressの構築やjQueryによる動的サイトの実装が得意なWebクリエイターです。このブログではWeb制作で役に立ちそうな知識から、プライベートの出来事まで幅広いネタを取り扱っております。ご質問、ご要望はお問合せフォームからどうぞ! お仕事のご依頼はコレカラウェブへ! 2016年10月から放送大学に入学(選科履修生)

HTML | Posted on 2013/11/26 19:17

※コメントは管理人の承認後に公開されます。

コメントを残す

メールアドレスが公開されることはありません。