【counter-increment】連番の値を進める

counter-incrementプロパティでは、contentプロパティで追加するカウンタ(連番)の値を進める事ができます。

counter-incrementを要素に設定すると、その要素が出現するたびに、指定された分だけカウンタの値が自動的に進められます。 counter-incrementでカウンタ名(任意の名前)を設定し、contentプロパティの値に「counter()」を指定して下さい。 ()内にはcounter-incrementで設定したカウンタ名を記述します。

また要素の前後にカウンタ(連番)の値を付けたい場合は、「:before」擬似要素や「:after」擬似要素を併せて使用します。 counter-incrementプロパティを指定する要素に「:before」または「:after」を付けて下さい。

なおcontentプロパティのテキストと併せて複数指定すると、下記の表示例のようにテキスト内に連番を挿入する事も可能です。

※ブラウザによっては最初にcounter-resetを設定しないと、きちんと連番にならないようです。そのため下記の表示例ではbody要素に対してcounter-resetを指定しています。詳しくはcounter-resetプロパティのページを参照下さい。

書式

  • counter-increment : ……… 連番の値を進める

★:カウンタ名 整数値、none、inherit

カウンタ名
値を進めたいカウンタの名前(任意の名前)を指定します。カウンタ名のみを指定した場合は「1」だけカウンタの値が進められます。また名前の異なる複数のカウンタを半角スペースで区切る事で、複数指定することも可能です。
カウンタ名 整数値
名前の後に半角スペースで区切って整数値を指定した場合、その数だけカウンタの値を進める事ができます。0や負の値も指定できます。
none
カウンタの値を進めません。

使用した時の例

body {counter-reset: sample00 sample11;}

.sample1:before {
  content: counter(sample00);
  counter-increment: sample00;
}

/* ★★下記は応用となります★★ */
h4:before {
  content: "第" counter(sample11) "章 ";
  counter-increment: sample11;
}
h4 {counter-reset: sample22;}
h5:before {
  content: counter(sample11) "-" counter(sample22) " ";
  counter-increment: sample22;
}
<div class="sample1">sample1</div>
<div class="sample1">sample1</div>
<div class="sample1">sample1</div>

<h4>HTML入門</h4>
  <h5>HTMLの基礎を学ぶ</h5>
  <h5>HTMLの心得</h5>
<h4>CSS入門</h4>
  <h5>CSSの基礎を学ぶ</h5>
  <h5>CSSの心得</h5>

ブラウザ上の表示例

sample1
sample1
sample1

HTML入門

HTMLの基礎を学ぶ
HTMLの心得

CSS入門

CSSの基礎を学ぶ
CSSの心得

対応ブラウザなどのデータ

初期値 none 値の継承 継承しない
適用可能な要素 すべての要素
メディア visual / content
対応ブラウザ Internet Explorer8~ , Google Chrome2~ , Firefox1~ , Opera9.2~ , Safari4~

関連情報