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

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

項目テキストA

項目テキストA

項目テキストB

項目テキストB

項目テキスト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>を使った入れ子でも、同様に設定可能です。

Share on Twitter
関連記事
CSSで1文字目のスタイルを変える方法
CSSで1文字目のスタイルを変える方法
CSS Flexboxの基本と使い方
CSS Flexboxの基本と使い方
CSSでストライプなどの背景パターンを作る方法
CSSでストライプなどの背景パターンを作る方法