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

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

関連記事

HTMLでリンクをはる

どうも、べ〜やんです。 今回は、HTMLでリンクを貼る方法をざっくり紹介します。 テキストや画像をクリックしたら、別のページに移動できるあれです。 <a href=""&gt …

[css] borderで枠線をつける方法

どうも、べ〜やんです。 今回はCSSで枠線を指定する方法のborderの使い方を紹介します。 borderとは borderは枠線を指定できるプロパティです。 線の種類、太さ、色などを指定してさまざま …

[HTML] articleとsectionの使い方

どうも、べ〜やんです。 今回は、HTMLのarticleとsectionの使い方を紹介します。 articleとsection div、article、sectionどれを使っても見た目上は同じ様に表 …

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

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

CSSエフェクト紹介サイト!CSSFX

どうも、べ〜やんです。 今回は、CSSのおしゃれなエフェクトを紹介してくれるサイト『CSSFX』を紹介します。 CSSFXとは 引用元:CSSFX CSSFXはCSSのクリック、ホバー、ローディング時 …