【CSS Modules】@counter-styleアットルールの使い方

@counter-styleインターフェースは、カスタムカウンターのスタイルを定義するためのインターフェースです。このインターフェースは、CSSの標準的なカウンター（例えば、順序付きリストの「1, 2, 3…」）の表示形式を拡張し、開発者がカスタムの numbering や記号パターンを定義できるCSSアットルールです。ウェブページ上のリスト項目などに自動で付与される記号や番号を、デザイン要件に合わせ柔軟に制御する場合に利用されます。

@counter-style内では、カウンターの計算ロジックを定めるsystem、記号や文字列を定義するsymbols、前後の文字列を指定するprefixやsuffixを設定します。さらに、適用範囲を限定するrange、表示桁数を揃えるpad、スクリーンリーダーでの読み上げ方を指示するspeak-as、代替スタイルを指定するfallbackといった項目を定義可能です。

定義したカスタムスタイルは、list-style-typeプロパティの値としてリスト項目に適用できます。また、contentプロパティ内でcounter()やcounters()関数と組み合わせることで、任意のHTML要素に自由なカウンター表現を表示できます。このインターフェースを活用することで、標準機能では難しいユニークな箇条書きデザインなど、多様なカウンター表現をCSSのみで実現し、ウェブコンテンツの表現力を高めます。

Copy
1@counter-style custom-bullet {
2  system: cyclic;
3  symbols: "▶" "▷";
4  suffix: " ";
5}

引数なし

引数はありません

戻り値なし

戻り値はありません