【CSS Modules】counter()関数の使い方
counter()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
counter()関数は、CSSにおいて、自動的に生成されるカウンタの値を表示するために使用される関数です。主にcontentプロパティの値として利用され、要素に動的な番号付けやリストの連番などを付与する際に活用されます。
この関数を使用するには、まずcounter-resetプロパティでカウンタの名前を定義し、初期値を設定する必要があります。次に、counter-incrementプロパティで、そのカウンタが特定の要素が表示されるたびにどれだけ増減するかを制御します。これらのプロパティと連携させることで、HTML構造に依存しない柔軟な番号付けのロジックをCSSのみで実現できます。
counter()関数は、表示したいカウンタの名前を引数として受け取ります。基本的な書式はcounter(カウンタ名)です。例えば、counter(section-number)と記述します。また、カウンタの表示スタイルをオプションで指定することも可能です。例えば、counter(section-number, lower-roman)とすることで、カウンタの値を小文字のローマ数字で表示させることができます。利用可能なスタイルには、decimal（アラビア数字）、lower-alpha（小文字アルファベット）、upper-roman（大文字ローマ数字）などがあります。
ウェブページ上で、セクションの自動番号付け、図のキャプション番号、パンくずリストの階層表示など、様々な場面で動的な連番を効率的に付与する際に非常に役立ちます。これにより、HTMLの構造をシンプルに保ちながら、デザインの要件に応じて柔軟な番号付けを実現し、視覚的な情報の伝達を向上させることが可能です。
構文(syntax)
1.element::before { 2 content: counter(section-number); 3}
引数(parameters)
name, style = decimal
- name: string: カウンターの名前を指定する識別子
- style: string = 'decimal': カウンターの表示スタイルを指定する（例: 'decimal', 'lower-roman', 'upper-roman' など）
戻り値(return)
counter() 関数は、指定されたカウンターの現在の値を文字列として返します。