CSS counter-increment プロパティ

❮ 前章へ 完全な CSS リファレンス 次へ ❯

例

"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) " ";
}
 
Try it Yourself ❯

定義と用法

counter-increment プロパティは、1 つ以上のカウンタ値を増分します。

counter-increment プロパティは、通常、counter-reset および content プロパティと一緒に使用します。

デフォルト値： なし
継承： 継承する
アニメーション可否： 不可。animatable を参照
バージョン： CSS2
JavaScript 構文： object.style.counterIncrement = "subsection"; Try it

ブラウザ・サポート

表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。

プロパティ
counter-increment 4.0 8.0 2.0 3.1 9.6

注: IE8は、!DOCTYPE を指定した場合のみ counter-increment プロパティをサポートします。

CSS 構文

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

プロパティの値

値 説明
なし デフォルト値。カウンタを増分しません
id number id は、どのカウンタを増分するかを定義します。 number は、セレクタが出現するたびにカウンタをいくつ増分するかを設定します。 デフォルトの増分値は 1 です。 0 またはマイナスの値が使用できます。 id が、counter-rese tで初期化されていないカウンタを参照した場合、 デフォルトの初期値は 0 になります
initial プロパティにデフォルト値を設定します。initial を参照
inherit このプロパティは親要素を継承します。inherit を参照

関連ページ

CSSリファレンス：:before pseudo element

CSSリファレンス：:after pseudo element

CSSリファレンス：content プロパティ

CSSリファレンス：counter-reset プロパティ

HTML DOM リファレンス：counterIncrement プロパティ


❮ 前章へ 完全な CSS リファレンス 次へ ❯