こんにちは！フロントエンドの世界へようこそ。
HTMLを学び始めると、必ず出会うのが「リスト」ですよね。スーパーの買い物リストや、手順書のように「1, 2, 3…」と並ぶ番号付きリスト。今回は、その番号付きリストである `
- ` タグをもっと自由自在に操るための、ちょっとスパイスの効いたテクニックをお話しします。
- ` には、自動的に数字が振られますよね。
- 朝起きて顔を洗う
- コーヒーを淹れる
- メールをチェックする
これだけで「1. 2. 3.」と綺麗に並んでくれる。便利ですが、時には「途中の手順から表示したい」「ランキングみたいに逆から数えたい」なんてこともありますよね。そんな時に使うのが、今回紹介する `start` 属性と `reversed` 属性です。
—
1. 続き番号を作れる「start」属性
たとえば、ブログ記事を「全3回」の連載形式で書いているとします。
第1回と第2回は別のページとして書き、第3回のページで「続き番号」を表示したい……そんなとき、わざわざ手打ちで「3.」と書くのはHTMLの美学に反しますよね。そんな時は `start` 属性の出番です。
- 応用編：CSSでアニメーションを動かす
- 実践編：Webサイトを公開してみよう！
これだけで、ブラウザは「3, 4…」と自動で番号を振ってくれます。便利でしょう？
—
2. カウントダウンで目を引く「reversed」属性
次は、ランキング形式や、残り時間を意識させたい時などに使える `reversed` 属性です。
これを書くだけで、ブラウザは自動的に「5, 4, 3, 2, 1」とカウントダウンしてくれます。- トップ1：究極のパンケーキ
- トップ2：ふわふわオムライス
- トップ3：こだわりハンバーグ
「あれ、これって数字はどうやって決まるの？」と不安になるかもしれませんが、安心してください。何も指定しなければ、リストの個数に合わせて自動的に「3, 2, 1」と計算してくれます。計算が面倒なとき、ブラウザが代わってやってくれる……まさに現代の魔法ですね。
—
現場で役立つ「ちょっとした注意点」
さて、ここまで優等生な属性たちですが、現場では少しだけ気をつけておきたいことがあります。
互換性は？
現在、主要なブラウザ（Chrome, Firefox, Safari, Edgeなど）であれば、この `start` や `reversed` は完璧に動作します。古いブラウザを気にしすぎてガチガチに固める必要はもうありません。自信を持って使ってくださいね。
数字はあくまで「見た目」
ここが一番大事なポイントです。これらの属性は、あくまで「見た目の番号」を操作するものです。もしCSSでデザインを激しくカスタマイズして、番号の見た目をガラリと変えたい場合は、CSSの `counter-reset` や `counter-increment` というプロパティを使うのがプロの現場の定石です。
でも、まずはHTMLだけでここまでのことができると知っておくだけで、コーディングの引き出しがグッと広がりますよ。
—
まとめ
今日覚えて帰ってほしいのは、この2つです。
- `start=”数字”`：好きな数字からカウントを開始できる（続き物を作るときに便利！）
- `reversed`：カウントダウン形式にできる（ランキングやカウントダウンに最適！）
HTMLは、ただの「文章の入れ物」ではなく、私たちの意図をブラウザに伝える「大切な指示書」です。こうした小さな属性を使いこなすことで、より意味のある（セマンティックな）HTMLを書くことができます。
「こんなことできるかな？」と思ったら、ぜひ一度試してみてくださいね。もし動かなくても大丈夫。そこからが学びのスタートです。またいつでも、この場所で一緒にコードを書きましょう！
「番号って、いつも1から始まるのが当たり前じゃないの？」と思っているあなた。実は、HTMLには「好きな数字から始めたり、逆にカウントダウンさせたりする」魔法のような属性があるんです。
一緒に紐解いていきましょう！
—
そもそも ` ` タグって何だっけ？
`
- ` は「Ordered List（順序付きリスト）」の略です。中身の `
コメント