意外と知らない？！CSSで文頭にナンバーを自動出力する方法

2020.02.08カルアカスタッフ

{{ item.count }}

こんにちは、リードスペース。久々にブログ書きます。

最近はCSS3が超便利で幸せな時代になったなと日々思っています。
とはいえ、今までのCSSだって捨てたもんじゃない。今更ですが意外と知らないCSS2のCSSカウンタが便利なのでその使い方をまとめてみました。

ざっくりいうと・・・・・

CSSカウンタってなんぞ？
CSSカウンタの使い方
1. 初期値・増加する値の設定
2. 数字形式の表示方法を変更する
デザインをアレンジ
カウンター関数を使って複雑なナンバリング（サンプルコードあり）

CSSカウンタってなんぞ？

CSSカウンタとは自動である要素を数えて、ナンバリングする機能です。contentプロパティのcounter()もしくはcounters()関数を利用して擬似要素(::beforeなど)にナンバーを出力できます。
工夫すればいろんな形式で出力できるし、デザインなどの幅も広がりとても便利です。

CSS カウンタの利用-ウェブディベロッパーガイド|MDN

CSSカウンタの使い方

counter-resetとcounter-incrementをそれぞれ指定します。

counter-reset　初期値を0にリセット
counter-increment　カウンタを一個づつ増加

counter-resetに設定する値は任意で命名できます。変数みたいなものだと思ってもらえればいいと思います。
なので複数カウンタを使うときは被らないよう注意します。

見出しのナンバリングを自動出力する

CSSカウンタはプライバシーポリシーで見かけるよくありがちな見出しなどにも使えます。
以下のようなコードになります。content: counter(number)のnumberがカウントされていきます。

[code title=”css”].numbering {
margin: 0;
counter-reset: number;
}
.numbering h2::before {
counter-increment: number;
content: counter(number);
padding-right: 5px;
}[/code]

[code title=”html”]<section class=”numbering”>
<h1>大見出し</h1>
<h2>中見出し</h2>
<p>本文です本文です本文です本文です本文です本文です本文です本文です本文です本文です</p>
<h2>中見出し</h2>
<p>本文です本文です本文です本文です本文です本文です本文です本文です本文です本文です</p>
<h2>中見出し</h2>
<p>本文です本文です本文です本文です本文です本文です本文です本文です本文です本文です</p>
</section>[/code]

出力イメージはこんな感じになります。リスト以外にも使えて便利ですね！

期値・増加する値の設定

counter-reset と counter-incrementの初期値はそれぞれ以下の通り。

counter-reset … 0
counter-increment … 1

変更したければ、値を追加します。

[code title=”css”]counter-reset: 5;[/code]

初期値は5なので5からスタート。

[code title=”css”]counter-increment: 3;[/code]

初期値+3かつ3こづつ増える。

数字形式の表示方法の変更

ちなみに入る数字の形式を変更することもできます。

[code title=”css”]content: counter(num, 表示形式);[/code]

設定名と種類

decimal	数字（初期値）
decimal-leading-zero	0つき数字（例：01、02、03）
lower-roman	ローマ数字（小文字）（例：ⅰ、ⅱ、ⅲ）
upper-roman	ローマ数字（大文字）（例：Ⅰ、Ⅱ、Ⅲ）
lower-alpha	アルファベット（小文字）（例：a、b、c）
upper-alpha	アルファベット（大文字）（例：A、B、C）
cjk-ideographic	漢数字（例：一、二、三）
hiragana	ひらがな（例：あ、い、う）
katakana	カタカナ（例：ア、イ、ウ）
hiragana-iroha	いろは順（例：い、ろ、は）
katakana-iroha	イロハ順（例：イ、ロ、ハ）