Counters (CSS)
counters() は CSS の関数により、カウンターが入れ子になっている場合にマーカーを組み合わせることができます。この関数は、指定された文字列と、存在する場合は名前付きで入れ子になったカウンターの現在の値を連結した文字列を返します。 3 番目はオプションの引数で、リストのスタイルを定義することができます。
counters() 関数は、ふつうは擬似要素の中の content で用いることが多いものの、理論的には <string> に対応するすべての箇所で用いることができます。
counters() 関数には counters(<name>, <string>) と counters(<name>, <string>, <style>) の 2 つの形があります。生成されるテキストは、 <name> で指定された名前のすべてのカウンターの値を、最も外側から内側に向けて並べ、指定された <string> で区切ったものです。カウンターは指定された <style> でレンダリングされ、<style> が指定されていない場合は decimal が既定値となります。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1.5 | 3 | 18 | 1 | |
| その他 | ||||||
| counter-increment は CSS のプロパティで、指定された値によって CSS カウンターの値を増加または減少させたり、すべてのカウンターまたは個々のカウンターが変化することを防いだりするためのプロパティです。 | 2 | 12 | 1 | 3 | 18 | 1 |
| CSS プロパティ | ||||||
list-item | 28 | 12 | 1 | 9 | 28 | 9 |
none | 2 | 12 | 1 | 3 | 18 | 2 |
| その他 | ||||||
| counter-reset は CSS のプロパティで、名前付きの CSS カウンターを作成し、指定された値で初期化します。要素の数値から 1 までカウントアップするカウンター、および要素の数値から 1 までカウントダウンするカウンターを作成することができます。 | 2 | 12 | 1 | 3 | 18 | 1 |
| CSS プロパティ | ||||||
list-item | 28 | 12 | 1 | 9 | 28 | 9 |
none | 2 | 12 | 1 | 3 | 18 | 2 |
reset does not affect siblings 実験的 現在の要素 (兄弟要素ではない) のカウンターをリセットします。 | | | 82 | | | |
| その他 | ||||||
| counter() は CSS の関数で、指定された名前付きカウンターの現在値があれば、その文字列を返します。 | 1 | 12 | 1 | 3 | 18 | 1 |
- このブラウザでは部分的にしか実装されていません
- 暗黙的な `list-item` カウンタの初期値をオーバーライドしても、リスト項目のデフォルトのマーカー文字列 (`::marker`) が生成されるときには効果がありません。 バグ 338233131 を参照してください。
- このブラウザでは部分的にしか実装されていません
- 暗黙的な `list-item` カウンタの初期値をオーバーライドすると、コンテンツの生成に使用される `counter()` 関数の値が不正確になります。これは、この関数が完全に実装されていないためです。 バグ 260436 を参照してください。
- このブラウザでは部分的にしか実装されていません
- 暗黙的な `list-item` カウンタの初期値をオーバーライドしても、リスト項目のデフォルトのマーカー文字列 (`::marker`) が生成されるときには効果がありません。 バグ 338233131 を参照してください。
- このブラウザでは部分的にしか実装されていません
- 暗黙的な `list-item` カウンタの初期値をオーバーライドすると、コンテンツの生成に使用される `counter()` 関数の値が不正確になります。これは、この関数が完全に実装されていないためです。 バグ 260436 を参照してください。
基本構文
body {
counter-reset: chapter;
}
h2::before {
counter-increment: chapter;
content: 'Chapter ' + counter(chapter);
}ライブデモ
実務での使いどころ
-
技術文書の自動章番号付け
見出し要素にCSSカウンターを適用し、章・節の番号を自動的に付与・更新できます。コンテンツの追加・削除時も自動的に再番号付けされます。
注意点
- CSSカウンターはDOMの順序に基づいて計算されるため、要素の視覚的な並び替え（order プロパティ等）とは一致しない場合があります。
アクセシビリティ
- CSSカウンターで生成された番号はスクリーンリーダーに読み上げられることがあります。HTMLの ol/li 要素との重複した番号付けが発生しないよう注意してください。