【コピペOK】CSSでcounterを利用して自動ナンバリングする方法

FUNA

こんにちは、リバティエンジニアのFUNA（フナ）です。現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。

今回はCSSの「counter」をコピペでも簡単に実装できる方法・ソースコードをご紹介します。このcounterを利用することで、CSSだけで自動でナンバリングを実装することができます。

意外と知られていないのですが、「1 2 3 4」の基本のものや「第1章 第2章 第3章 第4章」と書き出しをつけたりすることができて、幅広く応用できます。

【PR】:  フリーランス向け求人・案件を探すならこの3サイトがおすすめ！

【CSS】counterの基本的な使い方

まずは基本的な使い方を見てみましょう。

See the Pen css counter by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

【基本の使い方 手順①】親要素にcountercounter-resetを設定

まず、カウントしたい要素の親要素（上記コードではul）に「countercounter-reset」を設定しましょう。

/* カウンタを0にリセット */
  counter-reset: number 0; 

上記のソースコードでは「number」という名前でカウンターを作っています。numberの横の「0」は初期値です。

ここでカウントする値を初期化をしています。

【基本の使い方 手順②】ナンバリングしたい要素にcounter-incrementを設定

次に「counter-increment」をナンバリングする要素に設定します。

counter-increment: number 1;

これで先ほど初期化した「number」をインクリメント（増加数）を設定します。

上記の記述ではnumberを１ずつ増加させることになります。

【基本の使い方 手順③】

最後にナンバリングする要素に表示形式を設定します。

content: counter(number);

この記述では一番スタンダードな数字のみのナンバリングとなります。

【応用編】現場でもよく使うcounterの活用法

ここからは実際の現場でもよく使うことのあるcounterの活用例をご紹介します。

連番の前に文字を入れる方法（例, Chapter1.Chapter2...）

before要素にcontentを設定してcounterの前に「”（ダブルコーテーション）」で文字を入れるだけで実装可能です。

See the Pen css counter 数字前テキスト by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

連番の後に文字を入れる方法（例, 1位.2位...）

先ほど同様、before要素にcontentを設定してcounterの後に「”（ダブルコーテーション）」で文字を入れるだけです。

See the Pen css counter after text by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

連番の前後に文字を入れる方法（例, 第1章.第2章...）

こちらも先ほど同様、before要素にcontentを設定してcounterの前後に「”（ダブルコーテーション）」で文字を入れます。

See the Pen css counter text by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

漢数字や五十音順などを指定する方法（例, 一.二...）

このcounterですが、ここまでは数字をインクリメントしましたが、数字以外にも漢数字やあいうえお順などでも可能です。

方法としては、「counter」に任意のプロパティを指定するだけです。

See the Pen css counter propaty by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

 counterで利用できるその他のプロパティ

関連記事