| 適用できる要素 | 全て |
|---|---|
| 継承 | しない |
| 初期値 | none |
CSSのcounter-resetは与えられているカウンターを指定した値に初期化するプロパティです。
CSSで連番を作る際には必須になるプロパティで、一般的にはcounter-resetプロパティで値を初期化して、counter-incrementプロパティで値を加算する形で使われます。
counter-resetにはカウンターの名前と初期化する値を設定します。またcounter-resetは一度に複数のカウンターの初期化も行えます。
/* 構文 */
counter-reset: [カウンター名 値] | none;
/* qumeru-counterという名前のカウンターを0に初期化 */
counter-reset: qumeru-counter;
/* qumeru-counterという名前のカウンターを値を指定して初期化 */
counter-reset: qumeru-counter 1;
counter-reset: qumeru-counter -1;
/* 複数のカウンターを一度に初期化 */
counter-reset: qumeru-counter1 1 qumeru-counter2 4;上記のサンプルコードではqumeru-counterというカウンターを0で初期化しています。
初期化したあとに、箇条書きの各アイテムのbefore疑似要素でCSSのcounter関数で値を取り出しcontentで表側にカウンターの値を表示させています。
更にcounter-incrementプロパティでカウンターを加算しているため、次の箇条書きのアイテム要素では1加算された値が表示されています。
カウンターを2で初期化しました。箇条書きにはその次の3から表示されています。
counter-resetプロパティはほぼ全てのブラウザで動作します。
ブラウザの対応状況の詳細を見たい方は下記を参考にしましょう。