[CSS] 自動ナンバリングする方法

どうも、べ〜やんです。

今回は、counterを使って自動でナンバリングする方法を紹介します。

自動ナンバリング

見出しなどに番号をつけて表示する場合に、手動で入力すると面倒ですし途中で順番が変わったり増えたりするとさらに面倒ですよね。

counterは自動で順番にナンバリングしてくれるのプロパティです。

使い方

基本

今回使用するHTML↓

<h1>h1見出し</h1>
<h2>h2見出し</h2>
   <p>本文です本文です本文です本文です本文です本文です本文です本文です本文です本文です</p>
<h2>h2見出し</h2>
   <p>本文です本文です本文です本文です本文です本文です本文です本文です本文です本文です</p>
<h2>h2見出し</h2>
   <p>本文です本文です本文です本文です本文です本文です本文です本文です本文です本文です</p>

h2見出しに自動ナンバリングを設定していきます。

まずはcounter-resetとcounter-incrementを使って基本設定をします。

body {
   counter-reset: number 0;  /* numberのカウンタを0に指定 */
 }
 h2:before {
   counter-increment: number 1;  /* numberのカウンタを1ずつ増加 */
   content: counter(number) " ";
 }

counter-resetは親要素に、counter-incrementはナンバリングする要素に指定します。

counter-resetの値は変数名(number)と初期値(0)を設定しています。

変数名(number)の部分は自分で設定できるので、分かりやすい名前をつけます。

counter-incrementはカウンタの増加数を指定します。1とすると1ずつ増加、2とすると2ずつ増加。

counter-resetで初期値を0にして、counter-incrementで1ずつ増加にしているので、初期値(0)+1=１で１から始まり1ずつ増加する連番がナンバリングされます。

contentで表示方法を指定します。

body {
   counter-reset: number 0;  /* numberのカウンタを0に指定 */
 }
 h2:before {
   counter-increment: number 1;  /* numberのカウンタを1ずつ増加 */
   content: counter(number) " ";  /* 番号の後ろに空白スペース */
 }

(“”)で囲んだ部分は「章」や「 . 」など番号の他に表示したいものを指定できます。今回は「空白スペース」を使用。

See the Pen WNNLvjy by beeyan (@orientado) on CodePen.

番号の前にもテキスト

contentでは番号の前後にテキストを表示できます。

content: "第" counter(number) "章 "; /* 番号の前に"第"、後ろに"章 " */

See the Pen YzzdVNW by beeyan (@orientado) on CodePen.

表示形式変更

漢数字やアルファベットなど数字以外の表示もできます。

content: counter(number, cjk-ideographic) " ";  /* 漢数字 */

( )の中でカンマで区切って表示を指定します。

See the Pen MWWZmrx by beeyan (@orientado) on CodePen.

その他の値↓

decimal   /* デフォルト */
decimal-leading-zero   /* 0付き */
cjk-ideographic   /* 漢数字 */
lower-roman   /* ローマ字（小文字） */
upper-roman   /* ローマ字（大文字） */
hiragana   /* ひらがな(あいう) */
katakana   /* カタカナ(アイウ) */
hiragana-iroha   /* ひらがな（イロハ） */
katakana-iroha   /* カタカナ（イロハ） */
lower-latin   /* ラテン語（小文字） */
upper-latin   /* ラテン語（大文字） */
lower-greek   /* ギリシャ語（小文字） */

後ろにナンバリング

今回は、擬似要素の:beforeを使ってきましたが:afterを使えば見出しの後ろに表示できます。

body {
   counter-reset: number 0;
 }
 h2:after {                       /* h2の後ろに表示 */
   counter-increment: number 1;
   content: " ." counter(number);  /* 前に　.を表示 */
 }

See the Pen KKKbmGJ by beeyan (@orientado) on CodePen.

おわりに

今回は、counterを使って自動でナンバリングする方法を紹介しました。

自動で表示してくれて便利です。