【入門編】counter-resetとcounter-incrementによる連番制御 – HTML実践ガイド

こんにちは！フロントエンドの現場で日々コードと格闘しているエンジニアです。

Webサイトを作っていると、「リストの先頭に連番を振りたいな」と思うこと、よくありますよね。そんな時、HTMLを書き始めたばかりの多くの人が、まずは `

` タグと `
1. ` タグに手を伸ばすはずです。もちろん、それは正解！でも、もし「デザインの都合で、リストじゃない要素に連番を振りたい」とか「途中で番号をリセットしたい」なんていう少しワガママな要望が出てきたら、どうしましょう？

   そんな時に魔法のように解決してくれるのが、今回解説する「CSSカウンタ」です。

   一見難しそうに見えるかもしれませんが、仕組みはとってもシンプル。一緒に紐解いていきましょう！

   —

   1. CSSカウンタは「お買い物リスト」のメモと同じ

   いきなり専門用語を並べるのはやめて、身近な例えから入りますね。

   想像してみてください。スーパーで買い物をしていて、手元のメモ帳に「1. 牛乳」「2. 卵」「3. パン」と書き込んでいく場面を。
   CSSカウンタというのは、まさにこの「メモ帳の行番号を自動で振ってくれる機能」なんです。

   • `counter-reset`: メモ帳を新しく用意して、番号を「0」にリセットする（新しいページの開始）。
   • `counter-increment`: メモを書くたびに、番号を「1」ずつ増やす。
   • `content`: 実際にその番号を画面に表示する。

   たったこれだけ。HTMLの構造に縛られず、好きな場所に番号を書き込めるのが最大の魅力です。

   —

   2. 実際に動かしてみよう！

   では、さっそくコードを書いてみましょう。今回は `

   ` ではなく、あえて `
   ` タグを使って連番を作ってみますね。

   / 1. 親要素でカウンターを初期化する /
   .my-list-container {
   counter-reset: my-counter; / ‘my-counter’ という名前のカウンターを作る /
   }

   / 2. 連番を振りたい要素に設定する /
   .item {
   counter-increment: my-counter; / 要素が出るたびに番号を1増やす /
   margin-bottom: 10px;
   }

   / 3. 擬似要素 ::before で番号を表示する /
   .item::before {
   content: counter(my-counter) “. “; / 形式を指定（例：1. ） /
   font-weight: bold;
   color: #ff6b6b;
   }

   朝のコーヒーを淹れる

   メールをチェックする

   今日のタスクを確認する

   どうでしょうか？ `

   ` タグなのに、まるで魔法のように「1.」「2.」「3.」と表示されたはずです。

   —

   3. なぜ `ol` ではなくCSSカウンタを使うの？

   「`ol` でいいじゃん」と思う気持ち、すごくわかります。でも、現場ではこんなシーンが多々あるんです。

   • デザインが複雑な時: リストの番号だけを大きくしたり、丸で囲んだりしたい場合、CSSカウンタの方が柔軟に装飾できます。
   • 途中から番号を変えたい時: 例えば、記事の途中で「続きはこちら」として番号を「4」から再開したい場合、`counter-reset` の値を調整するだけで自由自在です。
   • リスト構造ではない場所: 記事の見出し（`h2`など）に連番を振りたい時など、HTMLを書き換えずにCSSだけで制御できるのは本当に楽ですよ。

   —

   4. つまずきやすいポイント：ここだけ気をつけて！

   初めて触る方がよくつまずくのが、「どこでリセットするか」という点です。

   `counter-reset` を書く場所は、必ず「連番を振りたい要素の親（囲っている箱）」である必要があります。もし、連番を振るたびに `counter-reset` を書いてしまうと、毎回番号が「1」に戻ってしまい、「1. 1. 1. …」という悲しい結果になってしまいます（笑）。

   「親でリセットして、子でカウントアップする」。これだけ覚えておけば、もう怖いものはありません！

   —

   最後に：もっと自由に楽しもう

   CSSカウンタの面白いところは、単なる「1, 2, 3…」だけじゃないところです。
   `counter(my-counter, upper-roman)` と書けば「I, II, III…」とローマ数字に変えたり、`content: “ステップ ” counter(my-counter)` と書けば「ステップ 1」という文字を添えたりすることもできます。

   Web制作は、ルールに縛られるよりも、こうして道具を工夫して「自分の思い通りに動かす」時が一番楽しい瞬間です。まずはこのコードをコピーして、色や文字を変えて遊んでみてくださいね。

   「うまくいかないな？」と思ったら、それは成長のチャンスです。またいつでも聞きに来てくださいね。一緒に一歩ずつ進んでいきましょう！