CSS の counter-increment
プロパティは、指定された値によって CSS カウンターの値を増加又は減少させるためのプロパティです。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
注: カウンターの値は CSS の counter-reset
プロパティを使用して任意の値にリセットすることができます。
構文
/* "my-counter" を 1 増加 */
counter-increment: my-counter;
/* "my-counter" を 1 減少 */
counter-increment: my-counter -1;
/* "counter1" を 1 増加、 "counter2" を 4 減少 */
counter-increment: counter1 counter2 -4;
/* 増加又は減少させない。より詳細度が低い規則を上書きするために使用 */
counter-increment: none;
/* グローバル値 */
counter-increment: inherit;
counter-increment: initial;
counter-increment: unset;
counter-increment
プロパティは、以下の値のうちの一つで指定します。
- カウンターの名前を指定する
<custom-ident>
と、その後に任意で<integer>
。名前又は名前と数値の組み合わせを空白で区切ることで、数を増減させるカウンターを好きなだけ指定することができます。 - キーワード値
none
。
値
<custom-ident>
- 増加の対象となる、カウンターの名前です。
<integer>
- カウンタに加える値です。指定されない場合は既定値の
1
になります。 none
- カウンターは増加しません。これは既定値として、またはより詳細な規則によって増加を取り消すために使用することができます。
公式定義
形式文法
例
名前付きカウンターの増加
h1 {
counter-increment: chapter section 2 page;
/* chapter と page カウンタの値を 1 、
section カウンタの値を 2 増加させます。 */
}
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Lists Module Level 3 counter-increment の定義 |
草案 | 変更なし |
CSS Level 2 (Revision 1) counter-increment の定義 |
勧告 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。