サンプルあり

CSSカウンターの使い方

2019-07-15 2019-10-30

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

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

CSSカウンターの基本

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

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

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

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

構文：



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

例：

【counter-reset】ol 要素が現れるたびに変数 number を 0 にする


ol {
  counter-reset: number 0;  /* 0ならデフォルト値なので省略可能。 */
  list-style: none;
 }

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

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

構文：



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

例：

【counter-increment】ol 内の li 要素が現れるたびに変数 number を +1 する


ol li {
  counter-increment: number 1;  /* 1ならデフォルトなので省略可能。 */
}

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

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

構文：



counter( (変数名) )

例：

【counter()】ol 内の li の ::before 擬似要素に変数 number の値を表示する


ol li::before {
  content: counter(number)' ';
}

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

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

構文：



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

例：

【counters()】ol 内の li の擬似要素に変数 number の値を階層ごとに表示する


ol li::before {
  counter-increment: number;
  content: counters(number, '.') ' ';
}