counter-set プロパティ
＊Safari ブラウザは利用できません。counter-reset を代用して下さい。
counter-set プロパティは、番号付に利用するカウンター用メモリを初期化する CSS のプロパティです。
counter-set でカウンターメモリ名を初期化、counter-increment で値を増減します。 counter-reset でカウンターメモリを再設定します。
カウンター用のメモリは counter() ファンクションで カウンター名を指定することで取得することができます。
h2 {
counter-set: example_counter;
}
h2::before {
counter-increment: example_counter;
content: counter(example_counter) '. ';
}
詳しくは Example を参照してください
上記は counter-set で初期化された example_counter
をヘッダー h2 の題目の前に自動で番号を付けるものです。
ページ内 Index
構文(Syntax)
CSS
counter-set: none | [ <counter-name> <integer>? ]+ ;
<counter-name> がカウンタ用メモリ名になります。初期値は 0 になります。
名称の後ろの番号が初期値になります。
複数の値が指定可能です。
DOM ( JavaScript )
String = object.style.counterSet;
object.style.counterSet = " none | [ <counter-name> <integer>? ]+ ";
値（Values）
| Value | 摘要 |
|---|---|
| none | デフォルト値。設定値なし。この値を指定するとメモリされているカウンターを消去するので注意 |
| <counter-name> | カウンターメモリの名称 |
| <integer> | 初期値 |
| initial | 初期値に戻す。 |
| inherit | 親エレメントのプロパティを継承。 |
counter-set プロパティは、複数の値を組み合わせることができます。
備考（Remarks）
| 初期値（Default value） | none |
| 継承（Inherited） | No |
| CSS Animation | △ |
Example
counter-incrementの例です。counter-incrementプロパティは、counter-reset、counter()関数が必要です。
counter-resetプロパティは親エレメント<div>に、counter()関数は::before疑似エレメントのcontentプロパティに設定しています。 ここでは、counter-incrementプロパティはエレメントに設定しています。
関連する CSS プロパティ
関連する CSS プロパティには以下のものがあります。
| プロパティ名 | 概要 |
|---|---|
| counter-set | 「ぼかし」などの効果をもたせることができる。うしろの内容だけが影響を受ける |
| filter | 「ぼかし」などの効果をもたせることができる。内容全体が影響を受ける |
| position | エレメントの位置を調整 |