【CSS】番号を自動で整理！CSSカウンターの活用法

他のプログラミング言語の「インクリメント」のように、CSSにも1ずつ追加する機能があります。これを使うとページ内の対象要素を自動でナンバリングすることができ、順番の入れ替え時などに必要になるhtmlの修正が減って管理が楽になります。この記事では、そのCSSカウンターの基本から応用テクニックまでを詳しく説明します。

CSSカウンターとは？

CSSカウンターは、CSSのプロパティを利用してHTML要素に自動的に番号を付ける機能です。主にリスト、章節番号、見出し番号など、連続した番号が必要な場所で使用されます。

基本的な使い方

CSSカウンターを使用するには、まずcounter-resetプロパティを使ってカウンターを初期化します。次に、counter-incrementプロパティを使ってカウンターの値を増加させます。最後に、contentプロパティとcounter()関数を使ってカウンターの値を表示します。

.list {
    counter-reset: num; /* カウンターの名前を'num'として初期化 */
}
.list_item {
    counter-increment: num; /* 各.list_itemでカウンターを1増やす */ 
} 
.list_item:before {
    content: counter(num); /* カウンターの値を表示 */
}

カウンタースタイルのカスタマイズ: 表示例一覧

CSSカウンターの表示スタイルをカスタマイズする際に利用できる、counter-styleの異なるオプションを一覧で示します。

.list_item:before { 
    content: counter(num, オプションを追加);
}

上記の「オプションを追加」部分に以下のようなオプションを追加することにより、異なる番号付けスタイルを実装できます。

よく使うカウンタースタイル

デフォルト (数字)

• スタイル: decimal
• 例: 1, 2, 3, …

ゼロ埋めの数字

• スタイル: decimal-leading-zero
• 例: 01, 02, 03, …

アルファベット（大文字）

• スタイル: upper-alpha または upper-latin
• 例: A, B, C, …

アルファベット（小文字）

• スタイル: lower-alpha または lower-latin
• 例: a, b, c, …

ローマ数字（大文字）

• スタイル: upper-roman
• 例: I, II, III, …

ローマ数字（小文字）

• • スタイル: lower-roman
  • 例: i, ii, iii, …

例えば、セクション番号をゼロ埋めの数字で表示する場合は以下のように記述します。

h2:before {
    content: counter(num, decimal-leading-zero);
}

その他のカウンタースタイル

日本語を使用して「あいうえお」「いろはにほへと」のような順番付けをしたい場合もあるかと思います。そのようなニーズに応えるため、「Ready-made Counter Styles」というリソースがあります。
こちらには、世界中の言語や文化に合わせたカウンタースタイルが多数収録されており、日本語での表現も可能にしてくれます。ページは英語で書かれていますが、左側のメニューからJapaneseを選択すれば分かるかと思います。

CSSカウンタースタイルのカスタマイズ：カウンター+テキスト

CSSカウンターを用いて、特定の形式に合わせたカスタマイズされた表示を実現するための例を紹介します。

「01., 02., 03.」と表示させる例

各アイテムの前に0から始まる章番号を自動的に入れ、続けてドットを入れます。CSSを使って以下のように実装できます。

.list {
    counter-reset: num; /* カウンターを初期化 */
}
.list_item {
    counter-increment: num; /* 各.list_itemの出現で番号を増加 */
}
.list_item::before {
    content: counter(num, decimal-leading-zero) "."; /* 接頭語と番号と接尾語を表示 */
}

「チャプターI, チャプターII, チャプターIII」と表示させる例

各アイテムの前に「チャプター」というテキストを追加し、ローマ数字（大文字）の章番号を自動的に更新します。以下のように実装できます。

.list {
    counter-reset: num; /* カウンターを初期化 */
}
.list_item {
    counter-increment: num; /* 各.list_itemの出現で番号を増加 */
}
.list_item::before {
    content: "Chapter " counter(chapter, upper-roman); /* 接頭語と番号を表示 */
}

「第1章、第2章、第3章」と表示させる例

こちらは、各章の番号の前に「第」という接頭語をつけ、「章」という接尾語をつける形式です。CSSで以下のように設定します。

.list {
    counter-reset: num; /* カウンターを初期化 */
}
.list_item {
    counter-increment: num; /* 各.list_itemの出現で番号を増加 */
}
.list_item::before {
    content: "第" counter(num) "章"; /* 接頭語と番号と接尾語を表示 */
}

“”の中に数字の前後に表示させたいテキストをいれ、カウンターはそのまま記述とすることがルールです。

デモ

See the Pen
【CSS】番号を自動で整理！CSSカウンターの活用法 by GROWORKS (@groworks)
on CodePen.

まとめ

CSSカウンターは、Webページ上で自動的に番号を付ける際に非常に便利な機能です。この記事で紹介したように、CSSカウンターは見た目を整えるだけでなく、内容の追加や削除があっても自動で番号を更新してくれるため、非常に便利です。

初心者の方でも以下のポイントを押さえることで、すぐにCSSカウンターを活用することができます。

1. カウンターの初期化と設定：counter-resetでカウンターを初期化し、どこから番号を開始するかを設定
2. カウンターの増加：counter-incrementでカウンターを増やす要素を指定
3. 番号の表示：contentプロパティとcounter()関数を組み合わせて、実際に番号をWebページ上に表示させる

また、今回ご紹介した機能のほかにも逆順など、より高度なオプションもあります。興味がある方はぜひ掘り下げていってください。

この機能を活用して、読者が理解しやすい、整理されたWebサイトを作成しましょう。