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: ; |