【CSS Modules】@font-palette-valuesアットルールの使い方
@font-palette-valuesアットルールの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
@font-palette-valuesインターフェースは、COLRフォントなどのカラーフォントで使用される色の組み合わせ、すなわちカラーパレットを定義するためのインターフェースです。このアットルールを使用することで、開発者は複数のカラーパレットを独自の名前で作成し、それぞれに詳細な色指定を行うことができます。例えば、メインのパレットとして「dark-mode」を定義し、テキストや背景、アクセントカラーなどの特定の色番号に対応する具体的なカラー値を設定したり、別のパレットとして「light-mode」を定義し、異なるカラー値を設定したりすることが可能です。
定義されたカラーパレットは、font-palette CSSプロパティを使って、特定の要素に適用するフォントに結びつけることができます。これにより、同じフォントファイルを使用しながらも、デザインの要件に応じて簡単にカラーテーマを切り替えることが可能となり、ユーザーインターフェースの一貫性を保ちつつ柔軟な表現を実現します。この機能は、特にダークモードとライトモードの切り替えや、アクセシビリティ要件に応じた色の調整など、動的なデザイン変更が求められる場面で非常に有効です。@font-palette-values は、フォントの表現力を高め、より豊かで多様なデザインを実現するための重要なツールと言えます。
公式リファレンス: @font-palette-values
構文(syntax)
1@font-palette-values <palette-name> { 2 font-family: <font-family-name>; 3 base-palette: <integer> | light | dark; 4 override-colors: <color-override-list>; 5}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません