counter()とcounters()でCSS自動採番をシンプルに実装する

投稿日：2025.03.11

更新日：2025.03.16

counter()とは？

counter()を使うと、指定した要素に対して数値を自動でインクリメントし、疑似要素などでその数値を参照できます。以下のサンプルコードでは、各<section>が出現するたびにカウンターが増え、見出し<h2>の前に採番を表示します。

サンプルコード

HTML

<main class="main-contents">
  <section class="section">
    <h2 class="heading">Heading</h2>
  </section>

  <section class="section">
    <h2 class="heading">Heading</h2>
  </section>

  <section class="section">
    <h2 class="heading">Heading</h2>
  </section>
</main>

CSS

.main-contents {
  counter-reset: sectionCounter;
}

.section {
  counter-increment: sectionCounter;
}


.heading::before {
  content: counter(sectionCounter) ".";
}

出力例

1.Heading
2.Heading
3.Heading

counters()とは？

counters()は、ネストしたカウンターを結合して表示できる機能です。階層構造を表すときに、区切り文字を指定して連番を表示できます。

HTML

<main class="main-contents">
  <section class="chapter">
    <h2 class="chapter-heading">Chapter 1</h2>
    <div class="topic">
      <h3 class="topic-heading">Topic 1-1</h3>
      <h3 class="topic-heading">Topic 1-2</h3>
    </div>
  </section>

  <section class="chapter">
    <h2 class="chapter-heading">Chapter 2</h2>
    <div class="topic">
      <h3 class="topic-heading">Topic 2-1</h3>
      <h3 class="topic-heading">Topic 2-2</h3>
    </div>
  </section>
</main>

CSS

.main-contents {
  counter-reset: chapterCounter;
}

.chapter {
  counter-increment: chapterCounter;
}

.topic {
  counter-reset: topicCounter;
}

/* 大見出し用 */
.chapter-heading::before {
  content: counter(chapterCounter) ". ";
}

/* 小見出し用 */
.topic-heading {
  counter-increment: topicCounter;
}

.topic-heading::before {
  content: counters(chapterCounter, ".") "." counter(topicCounter) " ";
}

出力例

1. Chapter 1
1.1 Topic 1-1
1.2 Topic 1-2
2. Chapter 2
2.1 Topic 2-1
2.2 Topic 2-2

counter()で指定できる数字フォーマット例

CSSのcounter()で指定できる数字のフォーマットには以下のようなものがあります。

デフォルトのdecimal以外にもローマ数字や英字、先頭に0を付ける方法などを選択できます。

目的にあったスタイルを見つけて、柔軟に採番をカスタマイズしてみましょう。以下はその一例です。

<counter-style>	表示形式	記述例	出力例
decimal（デフォルト）	通常の数字で連番を表示します。	`counter(myCounter)`	1, 2, 3, ...
decimal-leading-zero（2桁）	2桁表示になるため、9以下の場合に0埋めされます。ただし、10以上は普通に表示されるので、3桁以上の0埋めはできません。	`counter(myCounter, decimal-leading-zero)`	01, 02, 03, ..., 09, 10, ...
lower-roman	ローマ数字（小文字）で連番を表示します。	`counter(myCounter, lower-roman)`	i, ii, iii, iv, ...
upper-roman	ローマ数字（大文字）で連番を表示します。	`counter(myCounter, upper-roman)`	I, II, III, IV, ...
lower-alpha	英字（小文字）で連番を表示します。	`counter(myCounter, lower-alpha)`	a, b, c, ...
upper-alpha	英字（大文字）で連番を表示します。	`counter(myCounter, upper-alpha)`	A, B, C, ...

3桁以上の0埋めはどう対応するのか？

2桁の0埋めはdecimal-leading-zeroで実装できますが、3桁以上の場合はどう実装するのでしょうか。

CSSの機能としては組み込まれていないので、以下のように実装が必要です。

想定される最大桁数に応じて設定しましょう。

CSS

/* 3桁0埋めの場合... */
li::before {
  content: "0" counter(myCounter, decimal-leading-zero);
}

li:nth-of-type(n + 100)::before {
  content: counter(myCounter);
}


/* 4桁0埋めの場合... */
li::before {
  content: "00" counter(myCounter, decimal-leading-zero);
}

li:nth-of-type(n + 100)::before {
  content: "0" counter(myCounter, decimal-leading-zero);
}

li:nth-of-type(n + 1000)::before {
  content: counter(myCounter);
}