リストの番号が「逆」になる？HTMLの意外と知らない「reversed属性」の魔法
Webサイトを作っていると、必ずと言っていいほど出会うのが「リスト」ですよね。
`
- `（点々のリスト）や `
- 最後の大詰め！仕上げのコーティング
- 乾燥させて、ツヤを出す
- まずはベースの形を作る
- 残り1つ！
- 残り2つ！
- 残り3つ！
- `（番号付きリスト）は、まるで朝のトーストにバターを塗るくらい、当たり前の存在です。
でも、ふとした瞬間にこんなことを思ったことはありませんか？
「ランキングみたいに、1位からじゃなくて『3、2、1』とカウントダウンさせたいな……」
そんな時、CSSで無理やり数字を消して、手書きで「3」「2」「1」と入力していませんか？ 実はそれ、HTMLだけでスマートに解決できるんです。それが今回紹介する `reversed` 属性です。
—
そもそも、` `タグの「番号」ってどういう意味？
`
- `（Ordered List：順序付きリスト）は、その名の通り「順番」に意味がある時に使います。
例えば、レシピの手順や、ランキングなどはまさにこれですね。
通常、`
- `タグを書くと、ブラウザは自動的に「1, 2, 3…」と番号を振ってくれます。これ、実はとても賢い機能なんです。もし途中で項目を一つ削除しても、ブラウザが勝手に番号を整えてくれるからです。
でも、「歴史の年表を新しい順に並べたい」とか「カウントダウンを表示したい」という時には、この「1から始まる」というルールが少し邪魔になってしまうことがあります。
—
`reversed` 属性を使ってみよう
そんな時、`
- `タグの中にこっそりと `reversed` という言葉を添えるだけで、あら不思議。番号が自動的に降順（逆順）に切り替わります。
さっそくコードを見てみましょう。
どうでしょう？ 驚くほど簡単ですよね。
「3」から始まって、「2」「1」と数字が減っていくリストができあがります。
ここでちょっとした知見：アクセシビリティの話
「CSSで数字を消して、テキストで書けばいいじゃん」と思う方もいるかもしれません。でも、それだと画面読み上げソフト（視覚障害のある方がWebサイトを使うためのツール）は、それが「リスト」であることを正しく理解できないことがあります。
HTMLのタグを正しく使うことは、「どんな人にとっても使いやすいサイトにする」ための第一歩です。`reversed`属性を使えば、ブラウザは「ああ、これは逆順のリストなんだな」としっかり理解して、読み上げてくれるようになります。これぞ、HTML本来の優しさですね。
—
さらに便利！「途中からカウントダウン」したい時
「いやいや、100からカウントダウンしたいんだよ！」という場合もありますよね。そんな時は、`start` 属性を組み合わせてみてください。
これだけで、100、99、98……と、自由自在にスタート地点を決められます。
—
つまずきやすいポイント：CSSとの付き合い方
最後に、現場でよくある失敗談をひとつだけ。
`reversed` を使っても、CSSで `list-style-type` をいじりすぎると、表示が崩れて見えることがあります。もし「数字が出ないよ！？」と焦ったら、CSSで `list-style` を `decimal`（10進法）に設定しているか確認してみてくださいね。
CSSはあくまで「見た目」を整える道具。「意味」や「順番」はHTMLに任せる。この役割分担を意識するだけで、あなたの書くコードはグッとプロっぽく、そして誰にとっても親切なものになりますよ。
—
まとめ：小さな工夫が、大きな差を生む
HTMLの属性って、たくさんあって全部覚えるのは大変ですよね。でも、今回紹介した `reversed` のように、「あ、こんなこともできるんだ！」という引き出しを一つ持っておくだけで、日々のコーディングが少しだけ楽しくなります。
難しいコードを無理に書く必要はありません。まずはこうして、HTMLが元々持っている機能を少しずつ使ってみる。その積み重ねが、いつの間にか「質の高いWebサイト」を作れる力になっているはずです。
もし「うまくいかないな？」と思っても、大丈夫。それはあなたが一つ上のレベルに挑戦している証拠ですから。またいつでも、この場所へ確認しに来てくださいね！
コメント