cssのcounter変数を利用すると、指定の要素に任意のcounterを設定することができ、設定されたcounterはcontentで利用することができます。
早速具体例を見ていきます。
counter-resetでカウンターを初期化
counterを使う際にはまず、counter-resetプロパティを使用してカウンターを初期化しておく必要があります。
bodyタグまたはrootにcounter-resetを設定します。
body{
counter-reset: [COUNTER NAME] [初期値] ;
}COUNTER NAMEには任意の名前を付けて、counterを呼び出す際に使用します。カウンター初期値を省略した場合には０が設定されます。複数のカウンターを設定できます。
:root{
counter-reset: chapter 1 section 10 page;
}
/* chapterカウンターに初期値1、
sectionカウンターに初期値10、
pageカウンターに初期値0
を設定 */counter-incrementでカウンターを増減
設定したカウンターは、counter-incrementプロパティで値を増減できます。増減値を省略した場合はプラス１となります。マイナス値の指定も可。
body{
counter-reset: chapter;
}
h2{
counter-increment: chapter 5;
}
/* chapterカウンターにプラス5 */counterの呼び出し
カウンターの値はcontentプロパティで使用できます。
呼び出しには counter(COUNTER NAME) という値を使用します。
counterの使用例
たとえば見出しの前に接頭辞を差し込みたい場合。
<style>
:root{
counter-reset: index;
}
h2::before{
counter-increment: index;
content:"第" counter(index) "章 ";
}
</style>
<h2>はじめに</h2>
<h2>本文</h2>
<h2>おわりに</h2>
↓
(OUTPUT)
第1章 はじめに
第2章 本文
第3章 おわりにcounter関数の応用
counterは必ず出力しないといけないものではありません。
:not や:emptyなどの擬似セレクタを利用して、特定の条件下でのみ表示させたり合計値を表示することも可能です。(以下例)
この記事には、個のh2タグと、個のh3タグがあります。
例の解説
h2タグとh3タグにそれぞれcounterを設定して、最後に擬似要素（赤字部分）で出力しているだけ。
この記事には、<div id="result"></div>個のh2タグと、<div id="result2"></div>個のh3タグがあります。
<style>
:root{
counter-reset: h2count h3count;
}
h2{
counter-increment: h2count
}
h3{
counter-increment: h3count
}
#result::after{
content:"[" counter(h2count)"]";
}
#result2::after{
content:"[" counter(h3count)"]";
}
</style>
