カウンターリセットプロパティ

最終更新：2026-09-13

counter-reset カウンターリセットプロパティ

counter-reset は新しい CSS カウンターを作成し、指定した値（デフォルト 0）で初期化します。自動番号付けの第一歩であり、通常は親要素に設定します。counter-increment と content の counter() 関数と組み合わせることで、複雑な多階層番号付けシステムを構築できます。

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

📝 構文

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

⚙️ 値

値	タイプ	説明
`none`	キーワード	リセットしない
`<counter-name> <integer>?`	値	カウンター名と初期値

▶ 例

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

▶ 試す

🌐 ブラウザーサポート

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

ヒント： counter-reset は通常、番号付きリストの親に設定します。各親は独立したカウンタースコープを作成します。

❓ よくある質問

Qcounter-reset は既存のカウンターをリセットできますか？

Aはい。counter-reset は指定したカウンターを指定値（デフォルト 0）に設定します。入れ子構造では、counter-reset を宣言した各要素が親の値を隠す新しいカウンターインスタンスを作成し、各セクションが独立した番号付けになります。リセットを省略すると、番号は親スコープから続きます。

Q番号を 10 から始めるには？

Acounter-reset: myCounter 9; として初期値を 9 に設定し、その後 counter-increment: myCounter が毎回 1 増えるため、最初の要素は 10 を出力します。最初の要素に表示されるのは初期値に 1 を加えた値です（増加は出力の前に実行されるため）。見落としやすい「1 ずれ」の仕組みです。

Q先に実行されるのは counter-reset と counter-increment のどちらですか？

A同じ要素上では、仕様により counter-increment が counter-reset より先に処理されます。実際には両者が同じ要素に書かれることはまれです。親がリセット（初期化）、子が増加、content が値を出力します。処理順序を知っておくと、入れ子構造でカウンターが予期せずずれるのを防げます。

Qcounter-reset: none は何をしますか？

Anone はいかなるカウンターもリセットしないことを意味し、カウンターは親スコープの現在値を維持します。要素間で番号を連続させたい場合に便利です。要素に counter-reset を宣言すると通常は新しいインスタンスが作られ（事実上ゼロにリセット）、none を明示的に書くと「リセットしない」となり、複数のブロックが連続して番号付けされます。