counter-increment

counter-incrementプロパティは contentプロパティで追加されたカウンタ(連番)の値を進めるプロパティです。カウンタは、「1.」「2.」「3.」「4.」の様にして番号を振ったり、「1.1.」「1.2.」「1.3.」「2.1.」の様にして章や節を表す形で番号を振ることもできます。

カウンタの制御は、counter( )、または counters( ) の形式で、括弧内にカウンタ名やスタイル(<list-style-type>)、区切り文字を contentプロパティに指定して行います。通常のカウンタは counter( ) を用いて、同じカウンタ名のリストがネストされた入れ子構造のリスト等の場合には、counters( ) で一括指定が可能です。

  • カウンタ名
  • カウンタ名 整数値
  • none
  • inherit
初期値
none
適用対象
すべての要素
継承
しない
メディア
all

counter-incrementプロパティの値

counter-incrementプロパティに指定できる値はそれぞれ以下の意味を示します。

カウンタ名
自動的に1だけ値を進める
カウンタ名 整数値
指定された整数値の分ずつカウンタの値を進める
none
カウンタの値を進めない(初期値)

カウンタ名は自由につけることが可能で、漢字やカタカナ、平仮名を入力することもできます。ただし、使える半角記号の文字種はハイフン(-)とアンダースコア(_)のみで、カウンタ名の最初を数字にすることはできない決まりです。値の進んだカウンタをリセット(初期化)したい場合には、counter-resetプロパティを指定します。

counter-incrementプロパティの実装状況

IE
◯:IE8よりサポート、IE6, 7は未サポート
Firefox
Opera
Chrome
Safari
iOS
Android

サンプル

h2 {
counter-increment : chapter ;
color : #136 ;
}
h2:before {
content : "第" counter(chapter) "章" ;
font-size : .7em ;
color : #666 ;
}
ol {
counter-reset : item ;
list-style : none ;
}
li { display: block ; }
li:before {
content: counters(item, ".") ". ";
counter-increment: item ;
}

カウンタは自身を入れ子にすることも可能です。その際は、counters( ) を使って一括指定を行います。同じカウンタ名のリストがネストされた入れ子構造のリストであれば、ネストされたリストに対して、「2.1.」「2.2.」「2.3.」「2.3.1」のように番号付けします。

Updated / Published