カウンター増分プロパティ

最終更新：2026-09-13

counter-increment カウンター増分プロパティ

counter-increment は 1 つ以上の CSS カウンターの値を増やし、自動番号付けの中心的な仕組みの一つです。要素がセレクタに一致するたびに、指定したカウンターが指定したステップ分（デフォルト 1）増加します。完全な自動番号付けを行うには counter-reset と content の counter() 関数が必要です。

カテゴリ
初期値	none
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS2
状態	標準

📝 構文

counter-increment: none | <counter-name> <integer>?;

⚙️ 値

値	タイプ	説明
`none`	キーワード	増加しない
`<counter-name> <integer>?`	値	カウンター名とステップ

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
counter-increment	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザーでサポート

ヒント： counter-increment は増加するだけで、値を表示しません。ページに数値を出力するには content: counter(name) と組み合わせます。

❓ よくある質問

Qcounter-increment と counter-reset の違いは？

Acounter-reset はカウンターを作成・初期化します（開始値を設定、デフォルト 0）。通常は親コンテナに宣言します。counter-increment は要素が一致するたびにカウンターを増やします（一致ごとにデフォルト 1）。通常は番号付けする要素に書きます。両者を content の counter() 関数と組み合わせることで、完全な自動番号付けが実現します。

Q1.1、1.2 のような多階層番号付けを作るには？

A2 階層のカウンターを使います。外側に counter-reset: chapter と counter-increment、内側に counter-reset: section と counter-increment を設定し、content: counter(chapter) "." counter(section); で出力します。これで 1.1 形式の番号付けになります。

Qcounter-increment のステップを 1 以外にできますか？

Aはい。counter-increment: myCounter 2; とすると毎回 2 ずつ増加します。数値を省略するとデフォルト 1 です。複数のカウンターを一度に増やすこともでき（例：counter-increment: a 1 b 2;）、負の値も有効です。値を変更するだけで、数値を表示するには content 内で counter() を使って出力する必要があります。

Qカウンターは入れ子リストで混ざったりしますか？

Aいいえ。CSS カウンターにはスコープがあります。要素で counter-reset を宣言すると親のインスタンスを隠す新しいカウンターインスタンスが作られ、子リストは初期値から再開します。たとえば、それぞれの <ol> が自分のカウンターをリセットすれば、他のリストと独立した番号付けになります。番号を連続させるにはリセットを省略するか、counters() で階層パス全体を出力します。