CSSのcounterで自動ナンバリングする方法

2022.09.02
HTML&CSS

CSSの「counter（カウンタ）」を使用して、自動で数字をナンバリングする方法の備忘録です。

counterの使い方

counterは、ナンバーをしたい箇所の擬似要素（before、after）に設定して使用します。

<body>
  <h1>項目テキスト</h1>
  <h1>項目テキスト</h1>
  <h1>項目テキスト</h1>
</body>

body{
  counter-reset: number 0;
}
h1::before{
  counter-increment: number 1;
  content: counter(number) " ";
}

項目テキスト

「counter」を使用する場合、まず初めに「counter-reset」プロパティでカウントする値を初期化します。

ナンバーを表示する箇所（上記の例では<h1>）の擬似要素に、「counter-increment」プロパティでカウントの増加数をセットします。
「number」は、ナンバーを表示するために使用する変数です。「content」プロパティに同じ変数を設定することで数字が表示されます。

「content」プロパティでは、表示形式を指定しています。上記の例では、「” “」で数字の後ろに半角スペースをセットしています。

文字と合わせて表示する方法

「content」プロパティの設定を変えることで、「第1位」のように、文字と数字を合わせたナンバリングをすることも可能です。

body{
  counter-reset: number 0;
}
h1::before{
  counter-increment: number 1;
  content: "第" counter(number) "位 ";
}

項目テキスト

「content」プロパティの自動ナンバリングの前後に「”“」で囲ったテキストを付加しています。

漢数字を指定する方法

ナンバリングは、数字だけでなく、漢数字や英数字などを指定することができます。「content」プロパティのcounter()で表示形式を変更します。

body{
  counter-reset: number 0;
}
h1::before{
  counter-increment: number 1;
  content: "第" counter(number, cjk-ideographic) "位 ";
}

項目テキスト

「cjk-ideographic」のプロパティ値を変更することで、下記の表記を指定できます。

decimal-leading-zero 先頭に0をつけた算用数字（01, 02, 03）
cjk-ideographic … 漢数字（一、二、三）
hiragana … ひらがな（あいうえお順）
hiragana-iroha … ひらがな（いろは順）
katakana … カタカナ（アイウエオ順）
katakana-iroha … カタカナ（イロハ順）
lower-alpha … 小文字のアルファベット（a, b, c）
upper-alpha … 大文字のアルファベット（A, B, C）
lower-latin … 小文字のラテン文字（a, b, c）
upper-latin … 大文字のラテン文字（A, B, C,)
lower-roman … 小文字のローマ数字（i, ii, iii）
upper-roman … 大文字のローマ数字（I, II, III）
lower-greek … 小文字のギリシャ文字（α, β, γ,）
armenian … アルメニア数字
georgian … グルジア数字
hebrew … ヘブライ数字

段落ごとの連番にする方法

counterを段落ごとに複数指定すると、段落が変わっても続きからの番号が振られます。

<div class="count-num">
  <h1>項目テキストA</h1>
  <h1>項目テキストA</h1>
  <h1>項目テキストA</h1>
</div>
<div class="count-num">
  <h1>項目テキストB</h1>
  <h1>項目テキストB</h1>
  <h1>項目テキストB</h1>
</div>

1 項目テキストA

2 項目テキストA

3 項目テキストA

4 項目テキストB

5 項目テキストB

6 項目テキストB

複数のcounterを設定して階層ごとに連番で表示する場合は「counter-reset」を上の階層の要素に指定してリセットします。

.count-num{
  counter-reset: number 0;
}
.count-num h1::before{
  counter-increment: number 1;
  content: counter(number) " ";
}

項目テキストA

項目テキストB

階層ごとに表示する方法

大見出し、小見出しのような別々の要素ごとに、異なるデザインのナンバリングをすることも可能です。

<div>
  <h1>大見出し</h1>
  <h2>小見出し</h2>
  <h2>小見出し</h2>
  <h1>大見出し</h1>
  <h2>小見出し</h2>
  <h2>小見出し</h2>
</div>

h1 {
  counter-increment: headline;
  counter-reset: sub-headline;
}
h1::after{
  content: counter(headline);
  margin-left: 10px;
}
h2 {
  counter-increment: sub-headline;
  margin-left: 20px;
}
h2::before {
  content: counter(sub-headline, decimal-leading-zero);
  margin-right: 10px;
}

大見出し

小見出し

大見出し

小見出し

上記の例では、大見出しの<h1>ごとにカウンターをリセットして、下の階層の小見出し<h2>は常に「1」からナンバリングされるように設定しています。

大見出しはafterでテキストの後ろにナンバーを表示し、小見出しは「decimal-leading-zero」で先頭に0をつけた算用数字を表示しています。各擬似要素には、marginで余白をセットしています。

入れ子になった要素の小見出しを表示する方法

入れ子になった要素に対して、大見出し「1.」、小見出し「1.1.」の形でナンバリングする方法です。

<dl>
  <dd>大見出し
    <dl>
      <dd>小見出し</dd>
      <dd>小見出し</dd>
    </dl>
  </dd>
  <dd>大見出し
    <dl>
      <dd>小見出し</dd>
      <dd>小見出し</dd>
    </dl>
  </dd>
  <dd>大見出し</dd>
</dl>

dl {
  counter-reset: num;
}
dd:before {
  content: counters(num, ".") ".";
  counter-increment: num;
}

大見出し

小見出し

大見出し

小見出し

大見出し

<dl>に「counter-reset」を設定することで、小見出しの<dd>のみナンバリングがリセットされるようになっています。

<dl>だけでなく<ol>、<ul>を使った入れ子でも、同様に設定可能です。