リストの数字を操ろう！HTMLの`
- `タグで「カウントダウン」や「途中から始める」を自由自在に
- 6位：銀河の彼方のパンケーキ
- 7位：星空のクリームソーダ
- 8位：月面旅行のクッキー
- カウントダウン開始：おやすみなさい！
- 残り2秒：準備はいいですか？
- 残り1秒：深呼吸して…
- 10位：最後の追い上げ！
- 9位：まだまだいける！
- 8位：ここからが本番！
- `start`属性：リストの開始番号を好きな数字に変更できる。
- `reversed`属性：リストを逆順（カウントダウン）にする。
こんにちは！Web制作の学習、順調に進んでいますか？
HTMLを書いていると、「ここから番号を振りたいな」「ランキングみたいに逆順で表示させたいな」なんて思うこと、ありますよね。
普通、`
- `タグ（順序付きリスト）を使うと、ブラウザは自動的に「1, 2, 3…」と数字を振ってくれます。とても便利ですが、「あれ？ 途中でリストが分かれちゃったけど、番号を繋げたいな」とか「カウントダウン形式にしたいな」といった少し複雑な要望が出てくると、どうすればいいか迷ってしまうものです。
実は、HTMLにはそんな時に役立つ「魔法の属性」が用意されているんです。今日は、`start`属性と`reversed`属性を使って、リストの数字を自在に操る方法を一緒に見ていきましょう！
—
1. 途中から番号を始めたい！「start属性」の出番です
例えば、ブログ記事を書いていて、「前編」と「後編」に分けたとします。
前編で「1位〜5位」を紹介して、後編では続きの「6位〜10位」を紹介したいとき、わざわざCSSで無理やり数字を書く必要はありません。
そんな時に活躍するのが`start`属性です。
どうやって使うの？
書き方はとってもシンプル。`
- `タグの中に「ここから数字を始めてね」という値を指定するだけです。
これだけで、ブラウザは「ああ、6から数え始めればいいんだね！」と理解してくれます。わざわざ手動で「6.」と書く必要はありません。これなら、途中で項目が増えたり減ったりしても、数字がズレる心配がないので安心ですよね。
—
2. カウントダウンしてみよう！「reversed属性」の魔法
次に紹介するのは、`reversed`属性です。これを使うと、数字が「10, 9, 8…」という風に逆順（カウントダウン）になります。
ランキングの発表や、ロケットの発射準備、あるいは残りタスクの表示など、視覚的に「減っていくこと」を強調したいときにぴったりです。
実践！カウントダウンリスト
使い方はもっと簡単で、`
- `タグに `reversed` と書くだけ。これだけでOKです。
「あれ、これだけで逆順になるの？」と思いますよね。そうなんです、HTMLはとっても賢いんですよ。
—
3. 組み合わせれば最強！もっと自由に数字を操ろう
実は、この2つの属性は組み合わせて使うこともできるんです！
「10位から始まって、そこからカウントダウンする」なんていう演出も、HTMLだけで完結します。
これ、まるで映画のカウントダウン演出みたいでワクワクしませんか？CSSでいちいち数字を消したり書き直したりする手間から解放されるので、ぜひ覚えておいてくださいね。
—
注意点：ブラウザの対応状況はどうなの？
「こんな便利な機能、ちゃんと動くの？」と心配になる方もいるかもしれません。
結論から言うと、現代のモダンブラウザ（Chrome, Safari, Edge, Firefoxなど）であれば、問題なくサポートされていますので、安心して使って大丈夫です！
ただし、ごく一部の古い環境ではサポートされていない場合もありますが、Web制作の世界では「動かないときは数字が普通に表示されるだけ」という、いわゆる「プログレッシブ・エンハンスメント（動けばラッキー、動かなくても情報は伝わる）」の考え方が主流です。ですので、安心してコードを書いてみてくださいね。
—
まとめ：HTMLは「意味」を大切にする場所
今回は、`
- `タグのちょっと便利な属性たちを紹介しました。
Web制作において、HTMLは「情報をどう整理するか」という骨組みを作る大切な場所です。CSSで見た目を整える前に、まずはHTMLだけで「数字の意味」を正しくコントロールできると、コードがとてもスッキリして管理もしやすくなりますよ。
「ここ、CSSで書いたほうが楽かな？」と迷ったら、まずは「HTMLでできないかな？」と調べてみてください。意外なほど簡単に解決できる機能が、HTMLにはたくさん隠されています。
今日の学びが、あなたのWeb制作のヒントになれば嬉しいです。それでは、また次回の記事でお会いしましょう！
コメント