CSS の counter-reset
プロパティは、 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-increment
プロパティを使用して増加させたり減少させたりすることができます。
構文
/* "my-counter" を 0 に設定 */
counter-reset: my-counter;
/* "my-counter" を -1 に設定 */
counter-reset: my-counter -1;
/* "counter1" を 1 に、 "counter2" を 4 に設定 */
counter-reset: counter1 1 counter2 4;
/* より詳細度が低い規則による値の初期化をキャンセル */
counter-reset: none;
/* グローバル値 */
counter-reset: inherit;
counter-reset: initial;
counter-reset: unset;
counter-reset
プロパティは、以下のうちの一つで指定します。
- カウンターの名前を指定する
<custom-ident>
と、その後に任意で<integer>
。名前又は名前と数値の組み合わせを空白で区切ることで、初期化させるカウンターを好きなだけ指定することができます。 - キーワード値
none
。
値
<custom-ident>
- 初期化の対象となる、カウンターの名前です。
<integer>
- 要素が出現するごとに、カウンターを初期化するための値です。与えられない場合、初期値の
0
なります。 none
- カウンターの初期化は行われません。これはより詳細度の低い規則によって定義された
counter-reset
を上書きするために使用することができます。
形式文法
例
h1 {
counter-reset: chapter section 1 page;
/* chapter と page カウンターを 0 に、
section カウンターを 1 に設定します。 */
}
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Lists Module Level 3 counter-reset の定義 |
草案 | 変更なし |
CSS Level 2 (Revision 1) counter-reset の定義 |
勧告 | 初回定義 |
初期値 | none |
---|---|
適用対象 | すべての要素 |
継承 | なし |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
ブラウザーの対応
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。