HTMLのリストに「1.1, 1.2」と自動で番号を振る！CSSの魔法「counters()」を使いこなそう
こんにちは！Web制作の世界へようこそ。
HTMLでリストを作るとき、`
- `や`
- 章の見出し
- 節の見出し
- 節の見出し
- 章の見出し
- 節の見出し
- `counters()`（複数形！）: これが一番のポイントです。最後に「s」がついているのがわかりますか？ これを使うことで、親から子へ、階層を超えて数字を繋げることができるんです。
- `”.”`: これは「数字と数字の間に何を入れるか」という区切り文字です。ここを「-（ハイフン）」に変えれば「1-1」になりますし、「 / 」に変えれば「1 / 1」にもできます。お好みで遊んでみてくださいね。
- `をよく使いますよね。でも、たまにこんな悩みにぶつかることはありませんか？
「入れ子（ネスト）になったリストで、親が『1』なら、子供は『1.1』『1.2』と自動で番号を表示させたい…」
実はこれ、JavaScriptをガリガリ書かなくても、CSSの「カウンター」という機能を使うだけで、いとも簡単に実現できるんです。
今回は、魔法のように階層番号を操る`counter-increment`と`counters()`関数の世界を、一緒に覗いてみましょう！
—
なぜ「カウンター」を使うの？
例えば、お役所の書類や取扱説明書を想像してみてください。「第1章」の中に「1-1 はじめに」「1-2 準備するもの」と書かれていますよね。
HTMLの`
- `タグを使えば自動で「1, 2, 3…」と番号は振られますが、2階層目になるとまた「1, 2, 3…」に戻ってしまいます。これを手動で「1.1」「1.2」と書き直すのは、修正が入ったときに地獄を見ます（笑）。
そこで登場するのがCSSの「カウンター」です。これは、CSSが裏側で「いま、何番目かな？」と数字をカウントしてくれる仕組みなんです。
—
魔法のレシピ：カウンターの設定手順
やることは大きく分けて3つだけ。難しく考えすぎないでくださいね。
1. `counter-reset`: カウンターを「0」にリセットして初期化する。
2. `counter-increment`: 要素が現れるたびに「1」ずつ増やす。
3. `counters()`: 溜まった数字を画面に表示する。
言葉にすると少し堅苦しいですが、実際にコードを見てみましょう。
実践コード：階層リストを作ってみよう
まずはHTMLで、ごく普通の入れ子リストを用意します。
次に、CSSで魔法をかけます。
/ カウンターの名前を「my-counter」と決めます /
.tree-list {
list-style: none; / デフォルトの数字を消す /
counter-reset: my-counter; / ここでカウンターを初期化！ /
}
.tree-list li {
counter-increment: my-counter; / liが出るたびにカウントアップ /
}
.tree-list li::before {
/ counters関数で、階層ごとの数字をドットで繋いで表示 /
content: counters(my-counter, “.”) ” “;
font-weight: bold;
}
—
ここで「なるほど！」ポイント
このコードの肝は、`content: counters(my-counter, “.”);` の部分です。
—
つまずきやすいポイントへのフォロー
「あれ、思った通りに数字が出ない…」というときは、だいたいこの2つのどちらかです。
1. `counter-reset` を書く場所: 親の要素（この場合は `.tree-list`）に書いていますか？ これを忘れると、カウントが始まりません。
2. `::before` 擬似要素: 番号を表示させるには、`li::before`（リスト項目の直前）という場所を指定してあげる必要があります。ここを忘れて「表示されない！」と悩むのは、誰もが一度は通る道です。大丈夫、何度でも書き直せばOKです！
—
まとめ：CSSは「表示の達人」
いかがでしたか？
JavaScriptで無理やり番号を生成しようとすると、ページを読み込むたびに計算が必要で少し重たくなってしまいますが、CSSならブラウザが瞬時に描画してくれます。
「構造はHTMLで、見栄えや番号はCSSで」。この役割分担ができるようになると、Web制作がグッと楽しく、そして楽になりますよ。
ぜひ皆さんのサイトでも、この「カウンターの魔法」を試してみてくださいね！何かうまくいかないことがあれば、いつでもまた聞きに来てください。応援しています！
コメント