CSS counter-incrementプロパティ
例
セクションとサブセクションに番号を付ける方法（例：「Section 1」、「1.1」、「1.2」）：
body
{
counter-reset:section;
}
h1
{
counter-reset:subsection;
}
h1:before
{
counter-increment:section;
content:"Section " counter(section) ". ";
}
h2:before
{
counter-increment:subsection;
content:counter(section) "." counter(subsection) " ";
}
試してみる »
プロパティの定義と使用説明
counter-increment プロパティは、1つ以上のカウンタ値を増加させます。
counter-increment プロパティは通常、counter-reset プロパティと content プロパティで使用されます。
| 初期値： | none |
|---|---|
| 継承： | no |
| バージョン： | CSS2 |
| JavaScript 構文： | object.style.counterIncrement="subsection" |
ブラウザサポート
すべての主要ブラウザは counter-increment プロパティをサポートしています。
注：IE8 は !DOCTYPE が指定されている場合のみ counter-increment プロパティをサポートします。
プロパティ値
| 值 | 説明 |
|---|---|
| none | インクリメントされるカウンタはありません |
| id number | id は、カウントを増やすセレクタ、id、クラスを定義します。number は増分を定義します。number は正数、ゼロ、負数のいずれかです。 |
| inherit | counter-increment プロパティの値に inherit を指定すると、親要素から継承されます。 |
関連記事
CSS リファレンス：:before 擬似要素
CSS リファレンス：:after 擬似要素
CSS リファレンス：content プロパティ
CSS リファレンス：counter-reset プロパティ
その他の拡張