CSSカウンターの使い方

CSSカウンターはHTMLドキュメントの位置に基づいてCSSが管理する変数を増加させたり減少させたりする仕組みです。

この記事では、CSSカウンターの使い方とサンプルを紹介します。

CSSカウンターの基本

CSSカウンターは「初期化」「増減」「値の取得」の3機能で使用します。

  • counter-resetでカウンターを初期化(デフォルト0)。
  • counter-incrementでカウンターを増減(デフォルト+1)。
  • counter()またはcounters()でカウンターの値を取得

サンプルプログラム

CSSカウンターの用例を見てみるとイメージが沸くでしょう。

カウンターの値の操作

カウンターの初期化(代入)

カウンターを初期化するにはcounter-resetプロパティに任意のカウンター名とカウンター値を指定します。

カウンター値を省略した場合、デフォルト値であるは 0 が適用されます。

構文:

  1. counter-reset: (変数名) (初期化値)

例:

【counter-reset】ol 要素が現れるたびに変数 number を 0 にする
  1. ol {
  2. counter-reset: number 0; /* 0ならデフォルト値なので省略可能。 */
  3. list-style: none;
  4. }

カウンターの増減

カウンターの値を相対的に変化させるには、counter-incrementプロパティにカウンタ名と増減値を指定します。

増減値を省略した場合、デフォルト値である +1 が適用されます。

構文:

  1. counter-increment: (変数名) (増減値)

例:

【counter-increment】ol 内の li 要素が現れるたびに変数 number を +1 する
  1. ol li {
  2. counter-increment: number 1; /* 1ならデフォルトなので省略可能。 */
  3. }

カウンターの表示

カウンターの表示はcontentプロパティの中でcounter()またはcounters()で表示することができます。

直感的なcounter()関数

counter()関数は単純で、カウンターの値をそのまま出力します。

構文:

  1. counter( (変数名) )

例:

【counter()】ol 内の li の ::before 擬似要素に変数 number の値を表示する
  1. ol li::before {
  2. content: counter(number)' ';
  3. }

入れ子を表現するcounters()関数

counters()関数はカウンターの階層を理解します。

第2引数でそれぞれのカウンターの値を区切る文字を指定するところが特徴です。

構文:

  1. counters( (変数名), (区切り文字) )

例:

【counters()】ol 内の li の擬似要素に変数 number の値を階層ごとに表示する
  1. ol li::before {
  2. counter-increment: number;
  3. content: counters(number, '.') ' ';
  4. }