CSSの「counter（カウンタ）」を使用すると連番などが自動で出力できる機能を実装することができます。

「1」「2」「3」のような基本的なものはもちろん、「1.1」「1.2」「1.3」「2.1」のような章や節を表すことができたり、「第1位」「第2位」「第3位」という書き出しを付けることができます。

それでは、さっそくサンプルを使いながら実装方法をまとめていきます。

基本的な使い方

CSSの「counter（カウンタ）」はカウンターを表示したいセレクタに擬似要素のbeforeかafterを使用します。beforeならcounterを指定した要素の先頭に番号や文字列の表示ができ、afterなら要素の後ろに表示できます。

「counter（カウンタ）」を使用するするときには、以下のプロパティが必要になります。

body{
  counter-reset: number 0;
}

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

プロパティ	内容説明
counter-reset	カウントする値を初期化をします。
counter-increment	カウント増加数の設定になります。 ※ 1を設定すれば、1づつ増加します。
content	表示形式の指定です。

See the Pen css_counter1 by Jun Yamagami (@Jun-Yamagami) on CodePen.

　

文字の前に自動的に数字がカウントされたことがわかってもらえると思います。

文字を含んだ書き方

英数字をはじめ、漢数字などを指定することができ、counterと合わせてさまざまな形にすることができます。

body{
  counter-reset: number 0;
}

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

See the Pen css_counter2 by Jun Yamagami (@Jun-Yamagami) on CodePen.

counter（）の前後に文字を入れるだけで、表示できるのでとても簡単です。

アルファベット・ひらがな・漢数字などを使ったカウンター

「content: counter(number,〇〇) " ";」〇〇の部分を以下の値を設定するとさまざまなカウンター文字になります。

プロパティ値

値	内容説明（表示説明）
armenian	アルメニア数字
circle	白丸
cjk-ideographic	漢数字
decimal	算用数字 （olデフォルト値）
decimal-leading-zero	先頭に0をつけた算用数字 （01, 02, 03, 等）
georgian	グルジア数字
hebrew	ヘブライ数字
hiragana	ひらがな – あいうえお順
hiragana-iroha	ひらがな – いろは順
inherit	istStyleType プロパティの値は親要素から継承することを指定する
katakana	カタカナ – アイウエオ順
katakana-iroha	カタカナ – イロハ順
lower-alpha	小文字のアルファベット （a, b, c, d, e 等）
lower-greek	小文字のギリシャ文字
lower-latin	小文字のアルファベット （a, b, c, d, e 等）
lower-roman	T小文字のローマ数字（ i, ii, iii, iv, v 等）
upper-alpha	大文字のアルファベット （A, B, C, D, E 等）
upper-latin	大文字のアルファベット （A, B, C, D, E 等）
upper-roman	大文字のローマ数字 （I, II, III, IV, V 等）

See the Pen css_counter by Jun Yamagami (@Jun-Yamagami) on CodePen.

いろんな種類があって、使い方によってはとても良いCSSです。

入れ子タイプのナンバーリンク

「ol」「li」を使った入れ子の場合、「1.1.」「1.2.」「1.3.」「2.1.」のような形式でナンバリングをすることができます。

ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section, ".") " ";
}

See the Pen css_counter3 by Jun Yamagami (@Jun-Yamagami) on CodePen.

「ol」「li」を使った入れ子の場合でも、簡単にやることができます。

まとめ

CSSの「counter（カウンタ）」を使用すれば簡単に連番を自動で付けることができます。

とても便利ですし、カウンターの種類もたくさんあるので、counterの使い方の理解と共に使用してみると良いと思います。ぜひ一度、お試し下さい。

CSS