フリーランス|WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 IRODORI DESIGN

B L O G

【CSS】疑似要素にcounterを指定して自動で連番を振る方法

counter
css
疑似要素
連番

HTMLで連番を振る際、HTMLに直接数字を書いたり、JavaScriptやjQueryを使って連番を振ったりしていませんか?
実は疑似要素を使うことで、CSSだけで自動で連番を振ることが出来るんです。
この記事では疑似要素を使ってCSSだけで自動で連番を振る方法をご紹介したいと思います。

疑似要素を使い連番を振る

疑似要素を使って連番を振る基本形はこちらです。

<ul class="number-box">
    <li>【CSS】疑似要素を使い連番を振る方法</li>
    <li>【CSS】疑似要素を使い連番を振る方法</li>
    <li>【CSS】疑似要素を使い連番を振る方法</li>
    <li>【CSS】疑似要素を使い連番を振る方法</li>
    <li>【CSS】疑似要素を使い連番を振る方法</li>
</ul>

このようなHTMLがあった場合、class="number-boxをひと塊として自動で連番を振るようにします。

.number-box {
    counter-reset: number 0;
}
.number-box li::before {
    counter-increment: number 1;
    content: counter(number);
}

class="number-boxcounter-reset:number 0を指定することでその中の要素で0から連番を振ることが出来るようになります。

そして、class="number-boxの子要素にcounter-increment:number 1content:counter(number)を指定します。

counter-increment:number 1は増加率を指定しています。この指定の場合はカウンターが1ずつ増加します。
content:counter(number)は表示形式を指定しています。この指定の場合、カウンターは「1、2、3…」と増加していきます。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

子要素に別の連番を振る

続いては少し応用した使用方法のご紹介です。

例えば以下のようなHTMLがあったとします。

<ul class="number-box">
    <li>【CSS】疑似要素を使い連番を振る方法
        <ul class="number-box__child">
            <li>【CSS】疑似要素を使い連番を振る方法</li>
            <li>【CSS】疑似要素を使い連番を振る方法</li>
            <li>【CSS】疑似要素を使い連番を振る方法</li>
        </ul>
    </li>
    <li>【CSS】疑似要素を使い連番を振る方法
        <ul class="number-box__child">
            <li>【CSS】疑似要素を使い連番を振る方法</li>
            <li>【CSS】疑似要素を使い連番を振る方法</li>
            <li>【CSS】疑似要素を使い連番を振る方法</li>
        </ul>
    </li>
    <li>【CSS】疑似要素を使い連番を振る方法
        <ul class="number-box__child">
            <li>【CSS】疑似要素を使い連番を振る方法</li>
            <li>【CSS】疑似要素を使い連番を振る方法</li>
            <li>【CSS】疑似要素を使い連番を振る方法</li>
        </ul>
    </li>
</ul>

これを先ほどのCSSを指定すると以下のようになります。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

親要素と子要素が同じ連番として番号が振られしまっていますね。

この場合、子要素のclass="number-box__childは別の連番として「1、2、3…」になるようにしたいですよね。

以下のようなCSSを指定することで子要素は別の連番を振ることが出来ます。

.number-box {
    counter-reset: number 0;
}
.number-box li::before {
    counter-increment: number 1;
    content: counter(number);
}

.number-box__child {
    counter-reset: number 0;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

固定テキストを設定する

「番」や「.」など、連番の前後に固定のテキストを設定することが出来ます。

その場合、CSSは以下のようにします。

.number-box {
    counter-reset: number 0;
}
.number-box li::before {
    counter-increment: number 1;
    content: "第" counter(number) "番";
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

連番のフォーマットを指定する

連番はフォーマットを指定することで様々なフォーマットの連番を振ることが出来ます。

フォーマットを指定する方法はこちら

.number-box {
    counter-reset: number 0;
}
.number-box li::before {
    counter-increment: number 1;
    content: counter(number, 【フォーマットを指定】);
}

それではここからは指定できるフォーマットをご紹介していきます。

アルメリア数字順

アルメリア数字順の場合はこちら。

.number-box {
    counter-reset: number 0;
}
.number-box li::before {
    counter-increment: number 1;
    content: counter(number, armenian);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

漢数字順

漢数字順の場合はこちら。

.number-box {
    counter-reset: number 0;
}
.number-box li::before {
    counter-increment: number 1;
    content: counter(number, cjk-ideographic);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

算用数字順

算用数字順の場合はこちら。

.number-box {
    counter-reset: number 0;
}
.number-box li::before {
    counter-increment: number 1;
    content: counter(number, decimal);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

先頭に0を付けた算用数字順

先頭に0を付けた算用数字順の場合はこちら。

.number-box {
    counter-reset: number 0;
}
.number-box li::before {
    counter-increment: number 1;
    content: counter(number, decimal-leading-zero);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

グルジア数字順

グルジア数字順の場合はこちら。

.number-box {
    counter-reset: number 0;
}
.number-box li::before {
    counter-increment: number 1;
    content: counter(number, georgian);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

ヘブライ数字順

ヘブライ数字順の場合はこちら。

.number-box {
    counter-reset: number 0;
}
.number-box li::before {
    counter-increment: number 1;
    content: counter(number, hebrew);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

あいうえお順(ひらがな)

ひらがなのあいうえお順の場合はこちら。

.number-box {
    counter-reset: number 0;
}
.number-box li::before {
    counter-increment: number 1;
    content: counter(number, hiragana);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

いろは順(ひらがな)

ひらがなのいろは順の場合はこちら。

.number-box {
    counter-reset: number 0;
}
.number-box li::before {
    counter-increment: number 1;
    content: counter(number, hiragana-iroha);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

アイウエオ順(カタカナ)

カタカナのアイウエオ順の場合はこちら。

.number-box {
    counter-reset: number 0;
}
.number-box li::before {
    counter-increment: number 1;
    content: counter(number, katakana);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

イロハ順(カタカナ)

カタカナのイロハ順の場合はこちら。

.number-box {
    counter-reset: number 0;
}
.number-box li::before {
    counter-increment: number 1;
    content: counter(number, katakana-iroha);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

大文字のアルファベット順

大文字のアルファベット順の場合はこちら。

.number-box {
    counter-reset: number 0;
}
.number-box li::before {
    counter-increment: number 1;
    content: counter(number, upper-alpha);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

もしくはこちら。

.number-box {
    counter-reset: number 0;
}
.number-box li::before {
    counter-increment: number 1;
    content: counter(number, upper-latin);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

小文字のアルファベット順

小文字のアルファベット順の場合はこちら。

.number-box {
    counter-reset: number 0;
}
.number-box li::before {
    counter-increment: number 1;
    content: counter(number, lower-alpha);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

もしくはこちら。

.number-box {
    counter-reset: number 0;
}
.number-box li::before {
    counter-increment: number 1;
    content: counter(number, lower-latin);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

小文字のギリシャ文字順

小文字のギリシャ文字順の場合はこちら。

.number-box {
    counter-reset: number 0;
}
.number-box li::before {
    counter-increment: number 1;
    content: counter(number, lower-greek);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

大文字のローマ数字順

大文字のローマ数字順の場合はこちら。

.number-box {
    counter-reset: number 0;
}
.number-box li::before {
    counter-increment: number 1;
    content: counter(number, upper-roman);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

小文字のローマ数字順

小文字のローマ数字順の場合はこちら。

.number-box {
    counter-reset: number 0;
}
.number-box li::before {
    counter-increment: number 1;
    content: counter(number, lower-roman);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

まとめ

いかがでしたか?
CSSで自動で連番を振る方法をご紹介しました。
自動で連番を振ることで作業効率やメンテナンス効率が格段にアップすると思います。
是非、この便利なCSSで自動で連番を振るテクニックを活用してみて下さい。