CODING

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

投稿日:


どうも、べ〜やんです。

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





自動ナンバリング


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

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


使い方

基本

今回使用するHTML↓

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

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

まずはcounter-resetcounter-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で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を使って自動でナンバリングする方法を紹介しました。

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



-CODING
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

爆速!!Emmetを使う

どうも、べ〜やんです。 今回は、コーディングのスピードが抜群に速くできる方法のEmmetの使い方を紹介します。 Emmetとは HTMLやCSSを記述するときに全て手打ちしていると時間がかかってしまい …

[jQuery] jQueryのアコーディオンの作り方

どうも、べ〜やんです。 今回は、jQueryでのアコーディオンの作り方を紹介したいと思います。 アコーディオンとは よくメニューバーやQ&Aなどで使われているクリックすると、楽器のアコーディオ …

[HTML] リストの作り方ul・ol・liタグ

どうも、べ〜やんです。 今回はHTMLでリストや箇条書きをざっくり作る方法を紹介します。 リストとは ul・ol・liタグを使うとリストや箇条書きを作ることができます。 目次や手順、メニュー、スライド …

[CSS] CSSで背景色と文字色を半々にする方法

どうも、べ〜やんです。 今回は、CSSで背景色と文字色が半々で入れ替わるようなデザインの作り方を紹介します。 おしゃれなデザイン 背景色と文字色が半々で入れ替わるような表現が出来ると、一段とおしゃれな …

[CSS] linear-gradient()グラデーション

どうも、べ〜やんです。 今回は、グラデーションを指定するlinear-gradient()を紹介します。 linear-gradient()とは linear-gradient()は背景色をグラデーシ …