備忘録的プログラミングリファレンス

counter-incrementプロパティ

 counter-incrementプロパティは、番号付けに利用するプロパティです。値を増減して番号付けに利用することができます。

 <h2>〜<h5>で番号付けが必要なときに、手入力で番号付けしなくてもcounter-*プロパティ、::beforeや::afterといった疑似エレメントのcontentプロパティとcounter()関数で自動で番号付けが可能になります。

 counter-incrementプロパティは、counter-reset、counter()関数と併用します。

 counter-resetプロパティは親エレメントに、counter()関数は::beforeや::afterといった疑似エレメントのcontentプロパティに、counter-incrementプロパティはエレメントまたは疑似エレメントに指定します。

counter-incrementでexample_counterを指定(Exampleを参照
parent_element {
	counter-reset: example_counter;
}

h3.counter::before {
	counter-increment: example_counter;
	content: "第" counter(mexample_counter) "項";
}

構文(Syntax)

CSS

counter-increment: none | id number | initial | inherit ;

DOM ( JavaScript )

値の取得
String = object.style.counterIncrement;
値の設定
object.style.counterIncrement=" none | id number | initial | inherit ";

値(Values)

Value摘要
none初期値(default値)
id number通常は1つずつ増加します。numberに-1を指定すると-1ずつ減少します。
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)none
継承(Inherited)No
変化(Animatable)No

Example

 counter-incrementの例です。counter-incrementプロパティは、counter-reset、counter()関数が必要です。

 counter-resetプロパティは親エレメント<div>に、counter()関数は::before疑似エレメントのcontentプロパティに設定しています。 ここでは、counter-incrementプロパティはエレメントに設定しています。