counter-increment プロパティ
counter-increment プロパティは、
段落や見出しなどの要素の自動番号付けを設定します。
counter-reset プロパティ、
擬似要素 after と before、
および関数 counter を使用する content プロパティ
と組み合わせて使用されます。
理解を深めるために、例を参照することをお勧めします。
構文
セレクタ {
counter-increment: 名前 [増分] | none;
}
値
| 値 | 説明 |
|---|---|
| 名前 | カウンターの名前。 クラス名や id 名のような通常の単語。 複数の名前をスペースで区切って指定することができます。 この場合、複数のカウンターが同時に変更されます。 |
| 増分 | 正または負の整数。オプションのパラメータです。 |
none |
現在のセレクタに対してカウンターの増加を禁止します。 |
デフォルト値: none。
例
段落が自動的に番号付けされるようにしましょう：
<div id="parent">
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
#parent {
counter-reset: test;
}
#parent p::before {
counter-increment: test;
content: counter(test);
}
:
例
番号付けに加えて、何らかのテキストも追加してみましょう。
この例では、数字の前に №（番号）、後にピリオドを付けます：
<div id="parent">
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
#parent {
counter-reset: test;
}
#parent p::before {
counter-increment: test;
content: "№" counter(test) ".";
}
:
例
番号付けを 10 から始めましょう。このためには、
カウンターの初期値を必要な値より 1 少ない 9 に設定します：
<div id="parent">
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
#parent {
counter-reset: test 9;
}
#parent p::before {
counter-increment: test;
content: "№" counter(test) ".";
}
:
例
次に、増分を "2" とした番号付けにしましょう。
このためには、増分に 2 を設定します：
<div id="parent">
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
#parent {
counter-reset: test;
}
#parent p::before {
counter-increment: test 2; /* 2 を設定 */
content: "№" counter(test) ".";
}
:
例
前の例では番号付けが 2 から始まりましたが、1 から始めたかったとします。
なぜこうなったのでしょうか？なぜなら counter-reset はカウンターの値を
0 にリセットし、その後 counter-increment がその増分（デフォルトでは 1）を
追加するからです。そのため、以前は番号付けが 1 から始まっていました。
しかし今回は 2 が加算されるため、番号付けが 2 から始まります。
この問題を修正するために、カウンターの初期値を -1 に設定します。
これで、番号付けは 1 から始まり、2 ずつ増加します：
<div id="parent">
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
#parent {
counter-reset: test -1;
}
p::before {
counter-increment: test 2;
content: "№" counter(test) ".";
}
:
関連項目
-
カウンターの値をゼロにリセットするプロパティ
counter-reset
