counter()とは？
counter()を使うと、指定した要素に対して数値を自動でインクリメントし、疑似要素などでその数値を参照できます。以下のサンプルコードでは、各<section>が出現するたびにカウンターが増え、見出し<h2>の前に採番を表示します。カウンターはcounter-resetで作り、counter-incrementで増やします。
サンプルコード
<main class="main-contents"> <section class="section"> <h2 class="heading">Heading</h2> </section> <section class="section"> <h2 class="heading">Heading</h2> </section> <section class="section"> <h2 class="heading">Heading</h2> </section></main>.main-contents { counter-reset: sectionCounter;}.section { counter-increment: sectionCounter;}.heading::before { content: counter(sectionCounter) ".";}出力例
1.Heading
2.Heading
3.Heading
counters()とは？
counters()は、ネストしたカウンターを結合して表示できる機能です。階層構造を表すときに、区切り文字を指定して連番を表示できます。
サンプルコード
<main class="main-contents"> <section class="chapter"> <h2 class="chapter-heading">Chapter 1</h2> <div class="topic"> <h3 class="topic-heading">Topic 1-1</h3> <h3 class="topic-heading">Topic 1-2</h3> </div> </section> <section class="chapter"> <h2 class="chapter-heading">Chapter 2</h2> <div class="topic"> <h3 class="topic-heading">Topic 2-1</h3> <h3 class="topic-heading">Topic 2-2</h3> </div> </section></main>.main-contents { counter-reset: chapterCounter;}.chapter { counter-increment: chapterCounter;}.topic { counter-reset: topicCounter;}/* 大見出し用 */.chapter-heading::before { content: counter(chapterCounter) ". ";}/* 小見出し用 */.topic-heading { counter-increment: topicCounter;}.topic-heading::before { content: counters(chapterCounter, ".") "." counter(topicCounter) " ";}出力例
1. Chapter 1
1.1 Topic 1-1
1.2 Topic 1-2
2. Chapter 2
2.1 Topic 2-1
2.2 Topic 2-2
このサンプルではchapterCounterが入れ子になっていないので、counters(chapterCounter, ".")の出力はcounter(chapterCounter)と同じです。counters()が役に立つのは、次のように同じ名前のカウンターが入れ子になるときです。
入れ子のリストで使う例
入れ子の<ol>のそれぞれで同じ名前のカウンターを作ると、counters()は外側から内側までのカウンターを、区切り文字でつないで表示します。階層の数が決まっていなくても採番できます。
<ol> <li>Item <ol> <li>Item</li> <li>Item</li> </ol> </li> <li>Item</li></ol>ol { counter-reset: itemCounter; list-style: none;}li { counter-increment: itemCounter;}li::before { content: counters(itemCounter, ".") " ";}出力は「1 Item」「1.1 Item」「1.2 Item」「2 Item」になります。
counter()で指定できる数字フォーマット例
CSSのcounter()で指定できる数字のフォーマットには以下のようなものがあります。
デフォルトのdecimal以外にもローマ数字や英字、先頭に0を付ける方法などを選択できます。
目的にあったスタイルを見つけて、柔軟に採番をカスタマイズしてみましょう。以下はその一例です。
<counter-style> | 表示形式 | 記述例 | 出力例 |
|---|---|---|---|
decimal（デフォルト） | 通常の数字で連番を表示します。 |
| 1, 2, 3, ... |
decimal-leading-zero（2桁） | 2桁表示になるため、9以下の場合に0埋めされます。 |
| 01, 02, 03, ..., 09, 10, ... |
lower-roman | ローマ数字（小文字）で連番を表示します。 |
| i, ii, iii, iv, ... |
upper-roman | ローマ数字（大文字）で連番を表示します。 |
| I, II, III, IV, ... |
lower-alpha | 英字（小文字）で連番を表示します。 |
| a, b, c, ... |
upper-alpha | 英字（大文字）で連番を表示します。 |
| A, B, C, ... |
3桁以上の0埋めはどう対応するのか？
2桁の0埋めはdecimal-leading-zeroで実装できますが、3桁以上の場合はどう実装するのでしょうか。
3桁以上で0埋めをするキーワードは用意されていないので、以下のように実装します。
想定される最大桁数に応じて設定しましょう。
/* 3桁0埋めの場合... */li::before { content: "0" counter(myCounter, decimal-leading-zero);}li:nth-of-type(n + 100)::before { content: counter(myCounter);}/* 4桁0埋めの場合... */li::before { content: "00" counter(myCounter, decimal-leading-zero);}li:nth-of-type(n + 100)::before { content: "0" counter(myCounter, decimal-leading-zero);}li:nth-of-type(n + 1000)::before { content: counter(myCounter);}@counter-styleで桁数を指定する
@counter-styleで独自のカウンタースタイルを定義すると、padで桁数と埋める文字を指定できます。要素の数に応じてセレクターを書き分ける必要がありません。Chrome 91、Firefox 33、Safari 17から対応しています。
@counter-style pad-3 { system: extends decimal; pad: 3 "0";}li::before { content: counter(myCounter, pad-3); /* 001, 002, ..., 099, 100, ... */}参考・引用
この記事は役に立ちましたか？