CSSのカウンターで連番を自動ナンバリングする方法!

CSSのカウンターを使って連番の数字を自動ナンバリングする方法をサンプルコード付きで解説します。CSSのカウンターのテクニックをぜひ習得しましょう。

コンテンツ [表示]

  1. 1CSSのカウンターで連番を自動ナンバリングしたい
  2. 2CSSのカウンターで連番を自動ナンバリングする方法
  3. 2.1準備(前提知識)
  4. 2.2やり方
  5. 3CSSのカウンターに関する関連情報

CSSのカウンターで連番を自動ナンバリングしたい

HTMLでは自動で数字の番号をナンバリングしたいときがあります。

例えば下記のサンプルコードのような、見出しの頭に連番の数字を付けて書く利用規約や、プライバシーポリシーなど少し固めの文章でよく利用される形式の場合です。

上記のサンプルコードでは1、2、3などナンバリングの数字を手動で書いています。もちろん数が少なければそれでも良いのですが、数が多い場合は大変な労力がかかります。

このような場合でCSSのカウンターで連番を発行して、自動ナンバリングすると便利です。

そこで今回はCSSのカウンターで連番で自動ナンバリングする方法を解説していきます。

CSSのカウンターで連番を自動ナンバリングする方法

準備(前提知識)

CSSでカウンターを利用するには

  • counter-resetプロパティ
  • counter-incrementプロパティ
  • counter関数
を利用します。counter-resetプロパティはカウンターを初期化するプロパティで、その初期化されたカウンターの値をcounter-incrementプロパティで加算が行なえます。

また現在のカウンターの値はcounter関数で取得が行なえます。

counter-reset
counter-resetプロパティでCSSでカウンターを作る際の初期化時に必要なプロパティです。カウンターを0か指定した値に設定することが出来ます。サンプルコード付きで使い方と構文を解説します。
counter-increment
counter-resetのプロパティはCSSで連番のカウンターを作成する際に、カウンターの値を加算(減算)させるプロパティです。counter-resetの使い方や構文をサンプルコード付きで解説します。
counter()
counter関数はCSSで連番のカウンターを作成する際に使われ、現在のカウンターの値を取り出すことが出来るCSSの関数です。counter関数の使い方や構文についてサンプルコード付きで解説します。

やり方

それでは実際にカウンターを作成してみましょう。下記のサンプルコードを見てみましょう。

上記のサンプルコードではHTML側からは頭の数字は完全に消え、全てCSSのカウンターを使って頭の数字を付与しています。

では上記のサンプルコードを順番に解説していきます。

カウンターを初期化

カウンターの初期化

body {
  /* 見出しのカウンター */
  counter-reset: heading-counter 0;
}
.section {
  /* 段落のカウンター */
  counter-reset: paragraph-counter 0;
}

この部分でカウンターの初期化をしています。見出しのカウンターはページ全体で連番とししたいので、body要素のセレクタで初期化しています。

一方で段落のカウンターはセクション単位で初期化(次のセクションではまた1からスタート)したいので、.sectionのセレクタで初期化しています。

カウンターの値の取得と加算

カウンターの値の取得と加算

/* 見出しのスタイル */
.heading:before {
  counter-increment: heading-counter 1;
  content: "第" counter(heading-counter) "条";
}
/* 段落のスタイル */
.section p:before {
  counter-increment: paragraph-counter 1;
  content: counter(paragraph-counter) ".";
}

カウンターの値を加算するにはcounter-incrementプロパティを使い、カウンター名と加算する値を渡します。今回は1つず加算しています。

counter関数では現在のカウンターの値を取得することが出来ます。取得したカウンターの値をbefore疑似要素のcontentに設定することで各要素の頭に連番の数字を付与することが出来ます。

CSSのカウンターに関する関連情報

CSSでカウンターの値が増えない問題は初めてCSSのカウンターを利用する際にはよく遭遇します。記述や文法ミスの場合もありますが、ブラウザ依存という場合もあります。

カウンターの値が増えないという方は下記を参考にしてみて下さい。

あわせて読みたい
counter-incrementでカウンターの値が増えない場合の対処法!のイメージ
counter-incrementでカウンターの値が増えない場合の対処法!
counter-incrementはCSSでカウンターを加算する時に利用されるプロパティですが、counter-incrementを使ってもカウンターの値が増えない場合があり、その対処法をサンプルコード付きで解説します。

CSSのカウンターを使うと1位〜10位と順番に表示するいわゆるランキングが簡単に作成出来ます。

下記ではCSSのカウンターでランキングを作成する方法をサンプルコード付きで紹介しています。

あわせて読みたい
CSSでランキングを自動ナンバリングで作る方法!のイメージ
CSSでランキングを自動ナンバリングで作る方法!
CSSでランキングを自動でナンバリングする方法をサンプルコード付きで解説します。1位〜10位あるいは10位〜1位のランキング表示をCSSのカウンターを使って作ります。
今だけ
無料

【7月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次