counter関数の使い方 [CSS]

cssのcounter変数を利用すると、指定の要素に任意のcounterを設定することができ、設定されたcounterはcontentで利用することができます。

早速具体例を見ていきます。

counter-resetでカウンターを初期化

counterを使う際にはまず、counter-resetプロパティを使用してカウンターを初期化しておく必要があります。

bodyタグまたはrootにcounter-resetを設定します。

body{
  counter-reset: [COUNTER NAME] [初期値] ;
}

COUNTER NAMEには任意の名前を付けて、counterを呼び出す際に使用します。カウンター初期値を省略した場合には0が設定されます。複数のカウンターを設定できます。

:root{
  counter-reset: chapter 1 section 10 page;
}
/* chapterカウンターに初期値1、
   sectionカウンターに初期値10、
   pageカウンターに初期値0 
   を設定 */

counter-incrementでカウンターを増減

設定したカウンターは、counter-incrementプロパティで値を増減できます。増減値を省略した場合はプラス1となります。マイナス値の指定も可。

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>

Author

ミフネWEBのロゴ

ネットショップ専門のWEBサイト制作事務所です(個人事務所)。

部分的なテンプレートカスタマイズから、高速化や機能追加、新規ショップ制作などECに関するいろいろを承ります。(軽微なカスタムなら5,500円〜)

ご依頼・ご相談は「お問い合わせ・ご相談」より随時承ります。