CSScounter-increment プロパティは、指定された値によって CSS カウンターの値を増加又は減少させるためのプロパティです。

メモ: カウンターの値は 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
カウンターは増加しません。これは既定値として、又はもっと詳細な規則によって増加を取り消すために使用することができます。

形式文法

[ <custom-ident> <integer>? ]+ | 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 の定義
勧告 初回定義。

初期値none
適用対象すべての要素
継承なし
メディアすべて
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
counter-incrementChrome 完全対応 2Edge 完全対応 12Firefox 完全対応 1IE 完全対応 8Opera 完全対応 9.2Safari 完全対応 3WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android 完全対応 25Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, mfuji09, Sebastianz, ethertank, sii
最終更新者: mdnwebdocs-bot,