こんにちは！Web制作の現場に飛び込んだばかりの皆さん、毎日コードと格闘、お疲れ様です。
「リストを作るなら `
- ` か `
- ` タグを使わなくても、「ステップ1：〜」「ステップ2：〜」という綺麗なリストが完成しましたね！
—
つまずきやすいポイント：ここだけは気をつけて！
初めてこの機能を使うとき、多くの人が「あれ？ 数字が出ないぞ？」と焦ることがあります。そんな時は、以下の2点をチェックしてみてください。
- `content` プロパティを忘れていませんか？
CSSで「カウンターを増やせ！」と命令しても、それを `content` プロパティで「画面に表示してね」と伝えないと、ブラウザは無視してしまいます。`::before` や `::after` とセットで使うのが鉄則ですよ。
- リセットする場所は正しいですか？
`counter-reset` を書く場所は、カウントしたい要素の「親（大枠）」である必要があります。もし、リストの各要素の中に書いてしまうと、毎回数字が「1」にリセットされて、「1、1、1……」となってしまいます。これ、最初によくやる失敗なんです。大丈夫、僕も昔やりましたから（笑）。
—
なぜこの手法が現場で愛されるのか
正直に言うと、ただの箇条書きなら `
- ` タグで十分です。でも、このCSSカウンターを使う理由は「デザインの柔軟性」にあります。
例えば、番号の後に「かっこ」をつけたり、背景に丸い色をつけたり、さらには「1.1」「1.2」のような階層構造を表現したり……。HTMLの構造を変えずに、CSSだけで見た目を自由自在に操れるのは、まさにフロントエンドエンジニアの腕の見せ所です。
まとめ：怖がらずに遊んでみよう
CSSカウンターは、最初は少し不思議な仕組みに感じるかもしれません。でも、「裏側で店員さんがカチカチとカウンターを押している」とイメージすれば、少し身近に感じられませんか？
まずはこのコードをコピーして、`content` の中の文字を「No.」に変えてみたり、色を変えてみたりして遊んでみてください。失敗しても、ブラウザが壊れることは絶対にありません。
Webの世界は、こうやって「ちょっと工夫してみる」の積み重ねでできています。あなたの書くコードが、誰かの使いやすいWebサイトを作る第一歩になりますように。応援しています！
- ` でしょ？」と思っているそこのあなた。その直感は正しいですし、基本は間違いなくそこです。でも、実務でデザインカンプ（完成見本図）を眺めていると、「このリスト、ちょっと特殊な形だな……」と頭を抱える瞬間が必ず訪れます。
例えば、「段落の途中で番号をリセットしたい」とか、「`
そんな時、HTMLのタグを無理やり書き換えるのではなく、CSSの「カウンター機能」を使うと、驚くほどスマートに解決できるんです。今日は、このちょっと魔法みたいなテクニックを、身近な例えを交えて紐解いていきましょう！
—
カウンターって、結局なんなの？
想像してみてください。あなたは今、行列ができる人気パン屋さんの店員さんです。お客さんが並ぶたびに、手元のカウンター（カチカチ鳴るアレ）を「1、2、3……」と押していきますよね。
CSSカウンターもこれと全く同じ仕組みです。
1. `counter-reset`: 「よし、ここからカウントを0に戻してスタート！」と準備する（カウンターのボタンをリセットする）。
2. `counter-increment`: 「お、お客さんが一人来た！ カチッ」と数字を増やす。
3. `content`: 「今の数字はこれですよ」と画面に表示する。
この3ステップをCSSに命令するだけで、どんなタグだって「リスト」に変身させることができるんです。
—
実際に書いてみよう！
今回は、`
/ 1. 親要素でカウンターをリセット（名前は自由に決められます） /
.my-list-container {
counter-reset: my-custom-counter;
}
/ 2. 各アイテムでカウンターを増やす /
.my-list-item {
counter-increment: my-custom-counter;
margin-bottom: 10px;
}
/ 3. 擬似要素 ::before で数字を表示する /
.my-list-item::before {
/ カウンターの名前を指定して表示 /
content: “ステップ ” counter(my-custom-counter) “：”;
/ 見た目を整える（ここはあなたのセンスの見せ所！） /
font-weight: bold;
color: #ff6b6b;
margin-right: 8px;
}
どうでしょう？ `
コメント