こんにちは！フロントエンドの世界へようこそ。
Web制作を学んでいると、「見出しに番号を振りたいけれど、HTMLの`
- `タグだとデザインの自由度が低すぎる……」と悩むことはありませんか？
- ` を使いますよね。でも、「第1章」「第2章」といった見出しに自動で番号を振りたいとき、あるいは複雑なネスト（入れ子）構造で「1.1」「1.2」と連番を打ちたいとき、HTMLの標準機能だけでは力不足を感じることがあります。
そんなとき、CSSカウンターを使えば、HTMLの構造を汚さずに、CSSの力だけで自由自在に数字を操れるようになるんです。
例えるなら「整理番号付きの付箋」
想像してみてください。真っ白なノート（HTML）に、あとから付箋（CSS）を貼って、「ここは1番目、ここは2番目」と順番を書き込んでいくイメージです。ノートの内容を書き換えなくても、付箋を変えるだけで番号の振り方を変えられる。これがCSSカウンターの最大の強みです。
—
2. 3つの魔法の呪文
CSSカウンターを操るには、3つの「呪文（プロパティ）」を覚えるだけ。これだけで十分です！
1. `counter-reset`：カウンターを「初期化（リセット）」する。つまり、「ここから1から数え始めるよ！」というスタート地点です。
2. `counter-increment`：カウンターを「増やす」。要素が出るたびに「1、2、3……」とカウントアップします。
3. `content`：実際に画面に「表示する」。`::before` 擬似要素と組み合わせて使います。—
3. 実践！見出しに番号を振ってみよう
それでは、実際にコードを書いてみましょう。今回は「章（h2）」と「節（h3）」で、階層構造を持つ番号を作ってみます。
/ 1. 親要素でカウンターをリセットしてスタート地点を作る /
.article-container {
counter-reset: chapter-count; / 章のカウンターを0にリセット /
}/ 2. 章の見出しに番号を振る /
h2 {
counter-increment: chapter-count; / 見出しが出るたびに+1する /
}h2::before {
/ 3. contentプロパティで番号を表示する /
content: “第” counter(chapter-count) “章 – “;
}つまずきポイント：階層構造はどうするの？
ここが一番面白いところです！「1.1」「1.2」のような番号を作りたいときは、入れ子になった要素で新しくカウンターをリセットするだけでいいんです。
/ h2の中にあるセクションで、節用のカウンターをリセット /
h2 {
counter-reset: section-count; / h2が出るたびに、節のカウントは1に戻る /
}h3 {
counter-increment: section-count;
}h3::before {
/ 章の番号と節の番号を合体させる /
content: counter(chapter-count) “.” counter(section-count) ” “;
}—
4. 現場のプロからのアドバイス
CSSカウンターを使いこなすと、こんな良いことがあります。
- HTMLがスッキリする: 意味のない数字（1, 2, 3…）をHTML内に直書きしなくていいので、修正が楽になります。
- デザイン変更に強い: CSS側で `content: “Topic ” counter(…) “:”` のように変えるだけで、サイト全体の表記を一括で変更できます。
ちょっとしたコツ：
「番号がずれた！」という時は、だいたい `counter-reset` を書く場所が間違っています。「リセットするのは、その番号を囲っている親要素」と覚えておいてください。例えば「章」の番号なら、章を囲んでいる枠（親要素）でリセットするのが鉄則です。—
まとめ
CSSカウンターは、最初は少し不思議に感じるかもしれませんが、一度仕組みを理解すれば、これほど頼もしい相棒はいません。
- `reset` でスタートを決める。
- `increment` で数を増やす。
- `content` で数字を表示する。
これだけで、あなたのWebサイトの見出しは驚くほどプロフェッショナルで、管理しやすいものに変わります。ぜひ、次のプロジェクトで試してみてくださいね。「ここはどうするの？」と迷ったら、いつでもまた聞きに来てください。応援しています！
CSSで連番を操る「CSSカウンター」は、まさにそんな現場の救世主です。今日は、魔法のようなこの仕組みを、お買い物のレシートや付箋の整理に例えながら、一緒に解き明かしていきましょう。
—
1. なぜ「CSSカウンター」が必要なの？
通常、HTMLで番号リストを作るときは `
- ` と `
コメント