CSSでcounterの使い方を理解できるようにする

CSSでcounterの使い方を理解できるようにするためには、counterがどのような役割をするものなのか基本的なことから理解し始めると、記述するときに納得いくような使い方ができるようになります。

基本的なことを理解できたら、counterを使うときに一緒に指定する他のプロパティや値の使い方を理解することで、counterを記述する一連の流れも理解できるようにもなります。

1. CSSのcounterとは
2. CSSでcounterの使い方
3. CSSのcounterを複数にする使い方
- 3.1. counterを要素ごとに指定する
- 3.2. カウンター表示を階層ごとに連番にする
4. CSSでcounterを使用したデザイン

CSSのcounterとは

CSS2から追加されたcounterは、例えばHTML文書内の見出しタイトルの先頭や最後に見出しの順番に沿って自動で番号を表示することができます。

CSSカウンターと言われることが多く、CSSカウンター(counter)はCSSが管理する変数として何回使用しているかを追跡してくれるので自動で番号の振り分けができるのです。

CSSでcounterの使い方

CSSのcounterでカウンターを表示したいセレクタに擬似要素のbeforeかafterを使用します。beforeならcounterを指定した要素の先頭に番号や文字列の表示ができ、afterなら要素の後ろに表示できます。

そしてCSSの擬似要素を使用したセレクタにcounterを指定するために3つのプロパティと値を使用します

プロパティ

content:counter(カウンター名 , スタイル)
counter-increment: counter名増減値
counter-reset: カウンター名初期値

値

カウンター名　文字列
増減値　数字
初期値　数字

使用する上記3つのプロパティとその値は、それぞれcounterを指定して表示するときのコントーロールをしたりデザインを決定する役割としての使い方をするので、これらを含めたcounterの使い方を順番に理解できるようにします。

counterで番号を表示する

分かりやすく理解できるように見出しの先頭に番号のカウンターを表示する例で説明します。

<h2>でマークアップした見出しにcounterを指定してカウンターを表示するときには、h2::before{〜}で擬似要素を作り、プロパティにcontentを指定します。

h2::before {
    content: counter(practice);
    color: deeppink;
}

そしてcontentプロパティの値にcounterを指定します。このとき指定したcounterにはカウンター名の指定もします。指定するカウンター名は上のCSSコードのような任意のカウンター名を決めることができます。

今の時点でCSSのcounterを指定して見出しに表示されるのは、見出しの先頭に数字の0が各見出しに表示するだけです。

counterを指定して表示できた番号の0を各見出しに1、2、3〜と連番で自動表示させるためには、カウント対象の指定ができるCSSのcounter-incrementプロパティを使用します。

h2::before {
    content: counter(practice);
    color: deeppink;
}

h2 {
    counter-increment: practice;
}

疑似要素にしないセレクタを記述(例はh2)して、counter-incrementプロパティとcounter-incrementの値をカウンター名で指定します。

これで1つめのh2見出しから順番に連番が表示できるようになります。

counter-incrementで増減値の指定

counter-incrementでカウンター名の指定をしたことにより、カウンターの表示は標準では1つずつ加算される連番を自動で表示できます。

このときのcounter-incrementの値には、カウンター名の他に数字を指定することでcounterの増減値を指定する使い方ができます。

h2 {
    counter-increment: practice 2;
}

例えばh2に指定したcounter-incrementの値でカウンター名の指定をして、カウンター名の後ろに半角スペースを開けてから数字の2を指定します。

そうすると、counterを指定したh2の見出しに表示される連番はcounter-incrementの値で指定した2の倍数で表示することができます。

counter-incrementの値にする数字を-2とすれば、マイナスの値を指定することもできるので、counter-incrementは増減値の指定をするときに使用できます。

counter-resetで初期値の指定をする

CSSのcounterを使うときはcounter-resetプロパティの使い方も理解しておくようにします。

counter-resetはカウンターをリセットして特定の番号から表示したい場合に使います。

<div class="practice-count">
    <h2>サンプル</h2>
    <h2>サンプル</h2>
    <h2>サンプル</h2>
</div>

例えば先述したh2の見出しの親要素に上記のHTML記述のようにdivをマークアップしている場合です。

div.practice-count {
    counter-reset: practice 10;
}

h2::before {
    content: counter(practice);
    color: deeppink;
}

h2 {
    counter-increment: practice;
}

h2の見出しを囲んでいる親要素のdivをCSSのセレクタにしてcounter-resetの値にcounter指定したときに決めたカウンター名を指定してから半角スペースで区切り数字を指定します。

数字を10で指定したとしましょう。

見出しに表示できるカウンターはcounter-resetで指定した10の次、つまり11から始まる連番を自動で表示できます。

counter-resetで何も数字指定しないとか0で指定した場合は初期値になりカウンターは1から始まります

counter-resetの初期値については、カウンターを複数の使い方をしたいときに重要になってきます。

CSSのcounterを複数にする使い方

CSSのcounterを複数にする使い方をしたい場合は、counterをセットするときに要素ごとにcounter指定をして使います。

ここまでのcounterを指定してカウンター表示する使い方は1セットのカウンターで表示していましたが、counterを複数にする使い方をすることによって、h2はh2だけの階層で連番を構成し、h3はh3だけの階層で連番を表示するcounterの使い方ができるようになります。

counterを要素ごとに指定する

CSSでcounterの使い方の例は相変わらず見出しを例にします。

<div class="practice-count">
    <h2>サンプル</h2>
    <h3>さんぷる</h3>
    <h3>さんぷる</h3>
    <h2>サンプル</h2>
    <h3>さんぷる</h3>
    <h3>さんぷる</h3>
    <h2>サンプル</h2>
</div>

上のHTMLコードのような見出しの構造で大見出し(h2)と小見出し(h3)でマークアップしているようなときには階層になりますが、このような場合のCSSのcounterの使い方は、h2にcounterを指定して、h3にもcounterをセットします。

h2::before {
    content: counter(practice);
    color: deeppink;
    margin-right: 10px;
}

h2 {
    counter-increment: practice;
}

h3::before {
    content: counter(sub-practice);
    color: yellow;
    margin-right: 10px;
}

h3 {
    counter-increment: sub-practice;
    margin: 20px;
}

h2には先述したcounterの使い方と同じく1セットのcounterです。カウンターを複数にする場合に理解しておきたいのが、h2のcounterにセットしているカウンター名は、その要素にだけのカウンター名にしておくことです。

それなので小見出し(h3)にはcounterを指定した値に小見出しだけでカウントするためのカウンター名も指定します。

上のHTMLコードの例だと、h2にはpracticeというカウンター名でh3はsub-practiceというカウンター名です。

そうするとカウンター名を別々にしたCSSのcounterは要素ごとに分かれたカウンターの表示ができる使い方ができます。

カウンター表示を階層ごとに連番にする

CSSのcounterを複数にして要素ごとに指定すると、階層ごとにカウンターの表示ができますが、小見出しのカウンターが大見出しで間に挟まれていても以下のように連番になってしまいます。

1大見出し
　1小見出し
　2小見出し
2大見出し
　3小見出し
　4小見出し

このようなカウンター表示ではなく

1大見出し
　1小見出し
　2小見出し
2大見出し
　1小見出し
　2小見出し

のようにカウンターが続かないように区切って階層ごとの連番にする使い方もできます。

h2::before {
    content: counter(practice);
    color: deeppink;
    margin-right: 10px;
}
h2 {
    counter-increment: practice;
    counter-reset: sub-practice;
}
h3::before {
    content: counter(sub-practice);
    color: yellow;
    margin-right: 10px;
}
h3 {
    counter-increment: sub-practice;
    margin: 20px;
}

カウンター表示を階層ごとの連番にする場合はcounter-resetを上の階層の要素に指定してリセットします。このときのcounter-resetの値は下の階層で指定しているカウンター名にします。

counter-resetすることによってカウンター表示は階層ごとに連番を表示することができます。

CSSでcounterを使用したデザイン

CSSでcounterの値には数字だけではなく、文字を使用したり数字の形式を変更したりしてデザインすることができます。

h2::before {
    content: "season" " "counter(practice);
    color: deeppink;
    margin-right: 10px;
}

h2 {
    counter-increment: practice;
    counter-reset: sub-practice;
}

h3::before {
    content: counter(sub-practice, decimal-leading-zero);
    color: yellow;
    margin-right: 10px;
}

h3 {
    counter-increment: sub-practice;
    margin: 20px;
}

先ほどから例にしている見出しを使用して説明しますが、上のCSSはcounterをセットしたh2のcontentプロパティの値に”season” ” “の記述を加えました。