【CSS Modules】system-color型の使い方
system-color型の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
system-color定数は、オペレーティングシステム（OS）が提供するユーザーインターフェース（UI）の標準的な色を表すために使用される、あらかじめ定義されたキーワードの集合です。これにより、ウェブページのデザインをユーザーのOSテーマに合わせることが可能になります。
具体的なキーワードとしては、例えばテキストの色を表すActiveText、ウィンドウの背景色を表すWindow、選択されたアイテムの背景色を表すHighlightなどがあります。これらのキーワードは、CSSのcolorやbackground-colorといったプロパティの値として指定できます。ブラウザは、これらのキーワードをユーザーのOS設定に基づいて実際の色（例: #000000や#FFFFFFなどのRGB値）に変換し、ページに適用します。
この機能は、ウェブサイトのアクセシビリティを向上させ、ユーザーが慣れ親しんだOSのルック＆フィールに自然に統合された体験を提供することを目的としています。しかし、現在ではより柔軟な色の指定方法として、currentColorやCSSカスタムプロパティ（CSS変数）といった機能が普及しているため、system-colorキーワードは以前ほど頻繁には使用されなくなってきています。
公式リファレンス: <system-color>
構文(syntax)
1selector { 2 color: CanvasText; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません