CSSカウンターはHTMLドキュメントの位置に基づいてCSSが管理する変数を増加させたり減少させたりする仕組みです。
この記事では、CSSカウンターの使い方とサンプルを紹介します。
CSSカウンターの基本
CSSカウンターは「初期化」「増減」「値の取得」の3機能で使用します。
counter-reset
でカウンターを初期化(デフォルト0)。counter-increment
でカウンターを増減(デフォルト+1)。counter()
またはcounters()
でカウンターの値を取得。
サンプルプログラム
CSSカウンターの用例を見てみるとイメージが沸くでしょう。
カウンターの値の操作
カウンターの初期化(代入)
カウンターを初期化するにはcounter-reset
プロパティに任意のカウンター名とカウンター値を指定します。
カウンター値を省略した場合、デフォルト値であるは 0 が適用されます。
構文:
- counter-reset: (変数名) (初期化値)
例:
- ol {
- counter-reset: number 0; /* 0ならデフォルト値なので省略可能。 */
- list-style: none;
- }
カウンターの増減
カウンターの値を相対的に変化させるには、counter-increment
プロパティにカウンタ名と増減値を指定します。
増減値を省略した場合、デフォルト値である +1 が適用されます。
構文:
- counter-increment: (変数名) (増減値)
例:
- ol li {
- counter-increment: number 1; /* 1ならデフォルトなので省略可能。 */
- }
カウンターの表示
カウンターの表示はcontent
プロパティの中でcounter()
またはcounters()
で表示することができます。
直感的なcounter()
関数
counter()
関数は単純で、カウンターの値をそのまま出力します。
構文:
- counter( (変数名) )
例:
- ol li::before {
- content: counter(number)' ';
- }
入れ子を表現するcounters()
関数
counters()
関数はカウンターの階層を理解します。
第2引数でそれぞれのカウンターの値を区切る文字を指定するところが特徴です。
構文:
- counters( (変数名), (区切り文字) )
例:
- ol li::before {
- counter-increment: number;
- content: counters(number, '.') ' ';
- }