文頭にナンバーを自動出力する

olタグではなく、見出しタグなどを使用して自動で番号をつけていきたい。

このようなときには「CSSカウンタ」を使用します。

CSSカウンタは自動で要素を数えて、ナンバリングする機能です。
contentプロパティの「counter()」もしくは「counters()」関数を利用して
擬似要素（::beforeなど）にナンバー出力します。

「olタグで括弧付きの数字で表示する」でも使用しました。

使い方

「counter-reset」と「counter-increment」の指定

• counter-reset：初期値を0にリセットする
• counter-increment：カウンタを1づつ増加する

「counter-reset」の値は任意です。
複数カウンタを使用する時はそれぞれ別の値を設定します。

ナンバリングを自動出力

HTML

CSS

DEMO

HTML

文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章

CSS

文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章

JS

文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章

その他の設定

初期値・増加する値の設定

「counter-reset」と「counter-increment」の初期値を変更します
（何も設定しない場合の初期値はcounter-resetは0、counter-incrementは1となります）。

CSS「conter-reset」

「conter-reset」で初期設定する場合、一番目に表示すべき値の一つ前の値を設定します。
初期値を5に変更したので「6」からのスタートになります。

DEMO

HTML

文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章

CSS

文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章

JS

文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章

CSS「counter-increment」

初期値を4に変更したので「4」からのスタートかつ+4づつ増えます。

DEMO

HTML

文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章

CSS

文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章

JS

文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章

表示方法の変更

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

DEMO

HTML

文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章

CSS

文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章

JS

文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章

---

▼参考にさせていただきました。ありがとうございました。

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