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

==========
ブログの更新情報をTwitterやfacebookで紹介しています。ぜひフォローお願いします!
Twitter → @jugedred
facebook → Jugedred Project


この記事をかいた人

ドレッド Webクリエイター、ライター

Webクリエイター&ライター。このブログではWeb制作やライティングでお役に立ちそうは知識から、ドレッドの雑記的な内容まで幅広いネタを取り扱っています。ご質問、ご要望、お仕事のご依頼はお問い合わせフォームからどうぞ! 2016年10月から放送大学に入学しました。

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

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

コメントを残す

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