【CSS Modules】counters()関数の使い方
counters()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
counters()関数は、CSSのコンテンツ生成機能の一つであるカウンター（連番）の値を、複数のレベルで結合して表示する関数です。この関数は、主にCSSのcontentプロパティ内で使用され、文書の構造に応じた複雑な番号付けを実現するために利用されます。
特に、ネストされたリストやセクションの番号付けなど、多階層にわたる連番を「1.1.1」のように連結して表示したい場合に非常に強力です。例えば、ウェブページで章、節、項といった階層的な見出しに自動で番号を振る際に役立ちます。
counters()関数は、通常、counters(name, string, style)という形式で記述されます。一つ目の引数であるnameは、counter-resetプロパティで初期化され、counter-incrementプロパティで増減されるカウンターの名前を指定します。二つ目の引数であるstringは、結合される各カウンターのレベル間に挿入する任意の文字列です。例えば、ピリオド（.）を指定することで「1.2.3」のように表示できます。三つ目の引数であるstyleは、カウンターの表示形式を指定するもので、decimal（数字）、lower-alpha（小文字アルファベット）など、様々なスタイルが利用可能です。この引数は省略可能で、省略された場合はdecimalが適用されます。
この関数を使用することで、手動での番号管理の手間を省き、構造変更時の修正コストを大幅に削減できます。
構文(syntax)
1counters( <name>, <string> [, <style>] )
引数(parameters)
name, string, style = decimal
- name: string: カウンターの名前を指定する文字列
- style = decimal: カウンターのスタイルを指定する文字列 (例: decimal, lower-roman, upper-alpha)
戻り値(return)
文字列
counters() 関数は、指定されたカウンターの値を、指定されたフォーマットで結合した文字列を返します。