HTML

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

ABOUT ME
アバター
ドレッド
ライティングやWeb制作などインターネットを活用して毎日を自由に生活してるドレッドのブログです。Web制作のちょっとしたテクニックや、趣味で勉強している各種資格、放送大学での学びの記録、そして毎月買った本についての記録を残しています。
お気軽にご相談下さい!

このブログの運営者にお仕事を依頼しませんか?

コレカラウェブ

現在はフリーランスのクリエイターとして、ウェブメディアのライティングやホームページ制作、コンサルティングをしています。まずは事業用サイト「コレカラウェブ」にアクセスしていただき、お気軽にお問い合わせください。メールでのご相談は無料です。皆様からのご連絡お待ちしております。

コレカラウェブ公式サイトへ

関連記事

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA