【CSS】自動でナンバリングする

2023年9月9日

要素を増やしたら自動でナンバリングできるようにしたいな～

というわけで今回はCSSで自動でナンバリングする方法について説明します。

自動でナンバリングする方法

基本的な使い方

まずはコード紹介。下記をご覧ください。

See the Pen ブログ用　自動でナンバリングする方法1 by そす (@Sosgoyo) on CodePen.

ここで紹介するプロパティは下記の3つです！

　　　プロパティ　　　　　　　内容説明
●　counter-reset　　　　　カウントする値を初期化します。
●　counter-increment　　カウントの増加数をセットします。（1をセットすると1ずつ増加します）
●　content　　　　　　　　表示形式を指定します。

この中で応用を知っておきたいのが「content」のプロパティです。
「content」で表示形式を色々指定できるので、数字だけでなく
漢数字やローマ数字なども自動ナンバリングできます。

今回の例のコードは下記の通り↓

content: counter(number)". ";

” “の中に文字列を入れることもできます。（今回は「.」を入れております。）

「01、02、03」のような2桁表示にする

「content」のプロパティに「decimal-leading-zero」を追加すると
「01」みたいな2桁表示にできます。
さっそく見てみましょう！

See the Pen ブログ用　自動でナンバリングする方法1 by そす (@Sosgoyo) on CodePen.

該当のコードは下記のような感じ↓

content: counter(number,decimal-leading-zero)". ";

その他プロパティ値の紹介

「content」で指定できる表示プロパティを簡単に紹介します。

･cjk-ideographic　　　　　　　漢数字
･decimal-leading-zero　　　　先頭に0をつけた数字 (01, 02, 03等)
･lower-alpha　　　　　　　　　小文字のアルファベット (a, b, c, 等)
･upper-alpha　　　　　　　　　大文字のアルファベット (A, B, C, 等)
･lower-roman　　　　　　　　小文字のローマ数字 (i, ii, iii, 等)
･upper-roman　　　　　　　　大文字のローマ数字 (I, II, III, 等)