【CSS Modules】additive-symbolsアットルール記述子の使い方

additive-symbolsプロパティは、CSSの@counter-styleアットルール内で使用され、カスタムカウンターの加算式記号を定義するために必要な値を保持するプロパティです。このプロパティは、ウェブページでリストの番号付けや記号表示を、標準のスタイル設定を超えて独自にカスタマイズしたい場合に利用されます。

具体的には、additive-symbolsは「記号（シンボル）」とその記号が表す「重み（数値）」のペアを複数指定します。例えば、ローマ数字の「I」が1、「V」が5、「X」が10といったように、特定の数値に対応するシンボルを割り当てることができます。このプロパティの核心は、これらのシンボルを組み合わせて、指定されたカウンター値を表現する「加算式」の番号付けシステムを構築する点にあります。ブラウザはリストのカウンター値に対し、最も大きな重みを持つシンボルから順に適用できるものを選択し、そのシンボルを追加して残りの値を処理することで、最終的な記号列を生成します。例えば、数値が8の場合、重みが5の「V」と、重みが1の「I」を3つ組み合わせて「VIII」と表示されるような仕組みです。

システムエンジニアを目指す初心者の方にとって、このプロパティは、特定の文化圏に合わせたリストマーカーや、論文・資料などの特殊なセクション番号付け、あるいはゲームのスコア表示など、標準のリストスタイルでは実現できない複雑な表示要件を満たす際に非常に有用です。@counter-styleアットルールにおける重要な記述子であり、多様なデザインや国際化に対応するウェブコンテンツ開発において、柔軟な表現力を提供します。

Copy
1additive-symbols: <integer> <symbol> [, <integer> <symbol>]*;

引数なし

引数はありません

戻り値なし

戻り値はありません