【CSS】counter、counter-reset、counter-incrementを使った自動ナンバリング（カウンター）を実装する方法

Webサイトの制作中、「箇条書きや見出しに自動で番号を振りたい」という場面はよくあります。

HTMLの<ol>タグを使うのも一つの手ですが、CSSの「カウンター機能」を使えば、より柔軟に、そしてデザインに合わせた自由なナンバリングが可能になります。

この記事では、counter-resetやcounter-incrementを使った自動ナンバリングの実装方法を、初心者の方にも分かりやすく解説します！

CSSカウンターの基本サイクル

CSSでナンバリングを行うには、主に3つのプロパティを使用します。この3つのステップをセットで覚えるのがコツです。

【基本】シンプルな自動ナンバリング

まずは、リストの各項目に「第1章」「第2章」…と番号を振る基本的なコードを見てみましょう。

実装コード

/* 1. 親要素でカウンターをリセット */
.container {
  counter-reset: my-count; /* 名前は自由。ここではmy-count */
}

/* 2. 各項目でカウンターをカウントアップ */
.item h2 {
  counter-increment: my-count;
}

/* 3. 擬似要素で表示 */
.item h2::before {
  content: "第" counter(my-count) "章：";
  margin-right: 10px;
  color: #007bff;
  font-weight: bold;
}

実際に実装すると、以下のようになります。

<div class="container">
  <div class="item">
    <h2>ここに見出しが入ります。</h2>
  </div>
  <div class="item">
    <h2>ここに見出しが入ります。</h2>
  </div>
  <div class="item">
    <h2>ここに見出しが入ります。</h2>
  </div>
</div>

/* 1. 親要素でカウンターをリセット */
.container {
  counter-reset: my-count; /* 名前は自由。ここではmy-count */
}

.item {
  border: 1px solid #ddd;
  padding: 8px 16px;
  margin-bottom: 16px;
}
/* 2. 各項目でカウンターをカウントアップ */
.item h2 {
  counter-increment: my-count;
}

/* 3. 擬似要素で表示 */
.item h2::before {
  content: "第" counter(my-count) "章：";
  margin-right: 10px;
  color: #007bff;
  font-weight: bold;
}

ポイント

• counter-reset は親要素にかける: 子要素が始まる前に「ここからカウント開始」と宣言する必要があります。
• counter() 関数: contentプロパティの中で、カウントされた数値を呼び出します。
• 擬似要素（::before）を活用する

【応用】入れ子構造のナンバリング

「1.1」「1.2.1」のような、階層構造（入れ子）になったナンバリングには、counters()（複数形）を使います。

実装コード

/* 親リストでリセット */
ol {
  list-style: none; /* デフォルトの数字を消す */
  counter-reset: nested-count;
}

/* リスト項目ごとにカウントアップ */
li {
  counter-increment: nested-count;
}

/* 擬似要素で「親.子」の形式で表示 */
li::before {
  content: counters(nested-count, ".") " ";
  font-weight: bold;
}

実際に実装すると、以下のような表示になります。

<ol>
  <li>ここに項目が入ります。
    <ol>
      <li>ここに項目が入ります。
      <li>ここに項目が入ります。
      <li>ここに項目が入ります。
    </ol>
  </li>
  <li>ここに項目が入ります。</li>
  <li>ここに項目が入ります。</li>
  <li>ここに項目が入ります。</li>
</ol>

/* 親リストでリセット */
ol {
  list-style: none; /* デフォルトの数字を消す */
  counter-reset: nested-count;
}

/* リスト項目ごとにカウントアップ */
li {
  counter-increment: nested-count;
}

/* 擬似要素で「親.子」の形式で表示 */
li::before {
  content: counters(nested-count, ".") " ";
  font-weight: bold;
}

なぜ counters() なのか？

counters(名前, "区切り文字") と記述することで、親階層の数値を引き継いで「1.1」「1.1.1」のように自動で連結してくれます。マニュアルや規約などの構造化されたドキュメントに非常に便利です。

知っておくと便利なテクニック

カウントの開始番号を変える

counter-reset: section 5; と書けば、5からスタートさせることができます（正確には、次にカウントアップされた時に6になります）。

漢数字やアルファベットにする

counter() の第2引数にスタイルを指定できます。

• counter(my-count, lower-alpha) → a, b, c…
• counter(my-count, cjk-ideographic) → 一, 二, 三…

まとめ

CSSカウンターを使えば、HTMLを汚さずにスタイリッシュなナンバリングが実装できます。

1. 親で counter-reset
2. 子で counter-increment
3. 擬似要素の content で表示

この流れさえ押さえれば、ナンバリングの実装は難しくありません。

当記事の解説を参考に、CSSを使ったナンバリングを活用してみてください。

参考サイト

• CSS カウンターの使用 – CSS | MDN
• counter() – CSS | MDN
• counters() – CSS | MDN
• counter-increment – CSS | MDN
• counter-reset – CSS | MDN