HOME >
CSS >
CSSのcounter関数でカウントを行って連番を表示する

CSSのcounter関数でカウントを行って連番を表示する

投稿日:2025年02月06日

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

本記事は執筆時点（2025年02月06日）の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。

最近になって、contentプロパティのcounter関数を使えばCSSだけで要素をカウントして連番を表示できることを知りました。本記事ではcounter関数の使い方を備忘録としてまとめます。

counter関数の使い方

CSSのcontentプロパティでcounter関数を使うと、カウンターを作成し要素に連番を付与することができます。

下図の例のように接頭語接尾語を付けたり、0埋めをしたりなど表示させる際のカスタマイズも可能です。

contentプロパティとは？

contentプロパティは、擬似要素（beforeやafter）を使って、テキストや画像などのコンテンツを表示させるプロパティです。アイコンなど主に装飾のために用いられます。

疑似要素についてはこちらのページにまとめています。

counter関数でカウントを行うためには以下の3つのプロパティが必要です。

contentプロパティ（counter関数）
counter-incrementプロパティ
counter-resetプロパティ

counter-resetプロパティで定義

counter-resetプロパティは、カウンターを定義（任意の名前を設定）し初期化するプロパティです。

はじめに、カウントしたい要素の親要素（body要素など）に対して設定します。

下記の例ではカウンター名を「myCounter」に設定しました。

CSS

body{
    counter-reset: myCounter;
}
/*以下省略*/

半角スペースを空けてカウンター名を記述すれば複数のカウンターをまとめて定義できます。

ページ内に異なる複数のカウンターを設置したい場合はそれぞれに重複しない名前を付けます。

counter-incrementプロパティでカウントを実行する

counter-incrementプロパティは、カウントを実行（増やす）するプロパティです。

こちらは実際にカウントしたい要素（セレクター）に対して設定することで、その数をカウントします。

増加数も設定ができ「2づつ」や「3づつ」というようなカウントも可能です（数値は省略可能で、省略した場合は1づつカウントします）。

CSS

body{
    counter-reset: myCounter;
}
section::before{
    counter-increment: myCounter 1;
}

counter関数でカウントを表示する

counter-resetで定義したカウンター名を呼び出して疑似要素に現在のカウントを表示させます。

HTML

<body>
    <section></section>
    <section></section>
    <section></section>
</body>

CSS

body{
    counter-reset: myCounter;
}
section::before{
    content:counter(myCounter);
    counter-increment: myCounter 1;
}

プレビュー

カウンターのカスタマイズ

counter関数では、接頭語接尾語を付けたり、0埋めをしたりなど表示させる際のカスタマイズが可能です。

接頭語や接尾語を付与する

番号の前後に文字を追加し、「その1 その2 その3」や「1. 2. 3.」というような任意の形式でカウントを表示させます。

方法は簡単で、下記のように表示させたい文字をcounter関数に直接記述するだけです。接頭語（接尾語）とcounter関数の間には半角スペースを入れます。

下記の例では、カウントの前に「No.」という接頭語を付与しています。

CSS

section::before{
    content:"No." counter(c_parent);
    /*以下省略*/
}

プレビュー

数字の表記を変更する

counter関数の第二引数を使うことで、数字の表記を漢数字やローマ数字に変更ができます。

値	説明	例
decimal	10進法（デフォルト）	1 2 3 4 5
decimal-leading-zero	先頭を0で埋める	01 02 03 04 05
cjk-decimal	漢数字	一二三四五
upper-roman	ローマ数字	Ⅰ Ⅱ Ⅲ Ⅳ Ⅴ

下記の例では番号の0埋めを行っています。

CSS

section::before{
    content:"No." counter(c_parent,decimal-leading-zero);
    /*以下省略*/
}

プレビュー

入れ子のカウンター

counter関数では、下図の例のように複数のカウンターを入れ子にして設置することも可能です。

HTMLは以下の通りです。

HTML

<body>
    <section>
        <div class="myCounter_child">
            <div class="myBox">apple</div>
            <div class="myBox">strawberry</div>
            <div class="myBox">orange</div>
        </div><
    </section>
    <section>
        <div class="myCounter_child">
            <div class="myBox">black</div>
            <div class="myBox">white</div>
            <div class="myBox">red</div>
        </div><
    </section>
    <section>
        <div class="myCounter_child">
            <div class="myBox">tokyo</div>
            <div class="myBox">saitama</div>
            <div class="myBox">kanagawa</div>
        </div><
    </section>
</body>

counter関数を使って「section要素」とクラス「myBox」の数をそれぞれカウントし表示させます。

CSS

body{
    counter-reset: myCounter;
}
section::before{
    content:"No." counter(myCounter,decimal-leading-zero);
    counter-increment: myCounter;
}
.myCounter_child{
    counter-reset: myCounter_child;
}
.myCounter_child .myBox::before{
    content:counter(myCounter_child,decimal-leading-zero) ".";
    counter-increment: myCounter_child;
}

9行目「myBox」の方はセクションごとにカウントを行いたいので、counter-resetをbody要素ではなく、親要素であるクラス「myCounter_child」に設定しています。これによりセクションごとにカウントがリセットされ1から数えなおされます。

動的に増減する要素に対する挙動は？

JavaScriptのappend()とremove()を使って、ボタンを押したら要素を追加・削除する仕組みを作って検証してみました。

下図のように動的に要素が増減したとしても、counter関数は連動してくれることが確認できます。

まとめ

以上がCSSのcounter関数でカウントを行って連番を表示する方法です。

これまで連番を付けるときは「nth-of-child」「attr関数」を使っていたので、counter関数の便利さを痛感しています。