counter-increment、counter-reset : カウンターによる連番 CSSプロパティ
このページで解説するコードの実行結果。（タイトルの文字列をクリックすると、コードに移動）
HTML & CSSこのページでは、以下のコードをデフォルトとして使用している。
<div class="sample "> りんご🍎 </div> <div class="sample "> みかん🍊 </div> <div class="sample reset"> トマト🍅 </div> <div class="sample "> ぶどう🍇 </div> <div class="sample "> レモン🍋 </div>
body { counter-reset: cnt; /* うまく行かない場合のみ */ } .sample { counter-increment: cnt; } .sample::before { content: counter( cnt )". "; } .sample:first-child { counter-reset: cnt 9; /* 10から始める場合は9を指定 */ }
概要
カウンターを使って連番を設定するために使う。
counter-increment でカウンターを指定すると、要素が現れる度に値が増加（or減少）される。
カウンターの値を初期化するにはcounter-reset を使う。
| CSSプロパティ | 機能 | デフォルト値 |
|---|---|---|
counter-increment | カウンタを増加（or減少）させる。 | +1 |
counter-reset | カウンタをリセットする。 | 0 |
counter-increment
適当にカウンターの名前を定義する。
増分（or 減分）は第二引き数で指定する。
使用例
cntというカウンターを定義する。出力に変化はない。
.sample { counter-increment: cnt; }
::before疑似要素を使って、文字列の前にカウンターcntの値を表示させる。
.sample { counter-increment: cnt; } .sample::before { content: counter( cnt ); }
カウンターの番号の後ろに「. 」(ドットとスペース)を入れるように変更。
.sample { counter-increment: cnt; } .sample::before { content: counter( cnt )". "; }
番号をカッコ ( ) で囲むようにすることもできる。
.sample { counter-increment: cnt; } .sample::before { content: "( "counter( cnt )" ) "; }
増分の変更
初期値は+1であるが、増分を変更できる。
試しに+2となるように変更。2→4→6→ というように、+2されている。（偶数になっているので、初期値が0であることも分かる）
.sample { counter-increment: cnt 2; } .sample::before { content: counter( cnt )". "; }
-1に減少させていく。0が初期値なので-1→-2→-3→ となる。
.sample { counter-increment: cnt -1; } .sample::before { content: counter( cnt )". "; }
複数のカウンターを指定
複数のカウンターを指定するには、スペースでつなげる。
.sample { counter-increment: cnt1 cnt2; } .sample::before { content: counter( cnt1 )". "counter( cnt2 )". "; }
それぞれの増分を変更することもできる。（cnt1は+2、cnt2は-1とする）
.sample { counter-increment: cnt1 2 cnt2 -1; } .sample::before { content: counter( cnt1 )". "counter( cnt2 )". "; }
counter-reset
HTMLコードで、「トマト🍅」には.resetクラスも追加してある。
とりあえず、.resetの境界線の色をredにした。
.sample { counter-increment: cnt; } .sample::before { content: counter( cnt )". "; } .reset { border-color: red; /* 境界線の色 */ }
.resetクラスに counter-reset: cnt;を設定した。
このとき、カウンターcntは一旦0に初期化され、そこから+1されるようになる。
.sample { counter-increment: cnt; } .sample::before { content: counter( cnt )". "; } .reset { border-color: red; /* 境界線の色 */ counter-reset: cnt; }
初期化する値
初期化する値のデフォルト値は0であるが、任意の値に初期化できる。
以下は100に初期化する例。100で初期化すると、連番は101からになる。
.sample { counter-increment: cnt; } .sample::before { content: counter( cnt )". "; } .reset { border-color: red; /* 境界線の色 */ counter-reset: cnt 100; }
なお、.sample クラスの連番を20から始めたい場合、:first-child疑似要素を使えば初期値を指定できる。
.sample { counter-increment: cnt; } .sample::before { content: counter( cnt )". "; } .sample:first-child { counter-reset: cnt 19; /* 20から始めるので、19を指定 */ }
このときに.sample クラスの中で指定すると、毎回初期化されて20以上にならないので上手くいかない。
.sample { counter-increment: cnt; counter-reset: cnt 19; /* ここに指定すると毎回初期化されて増えない */ } .sample::before { content: counter( cnt )". "; }
うまくカウントアップされない場合
うまくカウントアップされない場合は、<body>要素などの（カウントアップする全体を包む）親要素にcounter-resetを設定する。
body { counter-reset: cnt; }
Emmet : coi cor
| 記述 | Visual Studio Code |
|---|---|
coi | counter-increment: ; |
cor | counter-reset: ; |