| 適用できる要素 | 全て |
|---|---|
| 継承 | しない |
| 初期値 | none |
counter-incrementはCSSで連番のカウンターを作成する際に利用するプロパティで、カウンターの値を加算（減算）することができるプロパティです。
一般的にcounter-resetプロパティやcounter関数と一緒に使われ、CSSで連番を作成する際に用いられます。
counter-incrementプロパティには加算する対象のカウンターの名前と、加算する値を渡します。
例えばqumeru-counterというカウンターを2加算したい場合は下記のように記述します。
qumeru-counterを2だけ加算
counter-increment: qumeru-counter 2;また半角スペースで区切ることで、まとめて複数のカウンターの加算を設定することが出来ます。
qumeru-counterを2だけ加算
counter-increment: qumeru-counter1 2 qumeru-counter2 4;/* 構文 */
counter-increment: [カウンター名 値] | none;
/* qumeru-counterを1だけ加算 */
counter-increment: qumeru-counter;
/* qumeru-counterを2だけ減算 */
counter-increment: qumeru-counter -2;
/* qumeru-counter1を1だけ加算、qumeru-counter2を2だけ減算 */
counter-increment: qumeru-counter1 qumeru-counter2 -2;上記のサンプルではqumeru-counterという名前のカウンターに2加算しています。そのため
2刻みで箇条書きのマーカーが表示されます。
counter-incrementで負の数値を指定して、減算させることでランキングを作成することが出来ます。
上記のサンプルコードでは初期のカウンターの値を11に設定し、1ずつ減算させることで箇条書きをランキングのように見せています。
counter-incrementプロパティはほぼ全てのブラウザで対応しています。
一部IEの古いバージョンやOperaで動作しませんが、モダンなブラウザはほぼ対応しています。
counter-incrementしているのに値が加算されないといった場合はcouter-resetがなかったり、文法エラーなどの可能性があります。
対処法については下記を参考にしましょう。
