Mar. 1st,2021
“システムカラー”とは？
＃
“<system-color>”値
“<system-color>”値はユーザー、ブラウザ、OSが選択した既定の色を表すキーワードです。“システムカラー(System Colors)”とも呼ばれ、一般的にブラウザのデフォルトのスタイルシートに使用されます。
強制カラーモードでは一部のプロパティの色の指定は強制的に既定の色に変更されますが、他のプロパティの色の指定を“<system-color>”値で行うことで、全体の配色の整合性をとることができ、読みやすさを確保することができます。スタイルが強制カラーモードで適用されるかどうかはメディアクエリの“forced-colors”特性で指定できます。
“<system-color>”値はテキストなどに使用される前景色と背景色のペアになっています。通常前景色と背景色は読みやすさが確保されるコントラストがありますが、ユーザーの設定が優先されるため変更されている場合もあります。
制作者はいつでも“<system-color>”値を使用することができますが、読みやすさを確保するために前景色と背景色の正しいペアで使用するべきです。
＃
システムカラーの一覧
＃
システムカラー
| 色 | カラーネーム | 説明 |
|---|---|---|
| Canvas | アプリケーションのコンテンツや文書の背景 | |
| CanvasText | アプリケーションのコンテンツや文書のテキスト | |
| LinkText | アクティブではない、未訪問のリンクテキスト (伝統的に青色。) | |
| VisitedText | アクティブではない、訪問済みのリンクテキスト (伝統的に紫色。) | |
| ActiveText | アクティブなリンクテキスト (伝統的に赤色。) | |
| ButtonFace | ボタンの背景 | |
| ButtonText | ボタンのテキスト | |
| ButtonBorder | ボタンの境界線 | |
| Field | 入力欄の背景 | |
| FieldText | 入力欄のテキスト | |
| Highlight | 選択されたテキストやアイテムの背景 | |
| HighlightText | 選択されたテキストやアイテム | |
| Mark | 特別にハイライトされたテキストの背景 (“mark”要素内のテキストなど。) | |
| MarkText | 特別にハイライトされたテキスト (“mark”要素内のテキストなど。) | |
| GrayText | 無効化されたテキスト (一般的に灰色。) |
＃
非推奨のシステムカラー
以下のシステムカラーは“CSS Level 2”まで定義されていましたが、“CSS Color Module Level 3”以降は非推奨とされています。“CSS Color Module Level 4”に対応した環境では新たに定義されたシステムカラーに読み替えられます。
| カラーネーム | 説明 | 後継のカラーネーム |
|---|---|---|
| ActiveBorder | アクティブなウィンドウの境界線 | ButtonBorder |
| ActiveCaption | アクティブウィンドウのキャプション | CanvasText |
| AppWorkspace | マルチ・ドキュメント・インタフェースの背景 | Canvas |
| Background | デスクトップの背景 | Canvas |
| ButtonHighlight | 一重の境界線で立体的に見える要素の光源を向いている境界線 | ButtonFace |
| ButtonShadow | 一重の境界線で立体的に見える要素の光源を向いていない境界線 | ButtonFace |
| CaptionText | キャプション、サイズ変更ボックス、スクロールバーの矢印ボックスのテキスト | CanvasText |
| InactiveBorder | アクティブでないウィンドウの境界線 | ButtonBorder |
| InactiveCaption | アクティブでないウィンドウのキャプション | Canvas |
| InactiveCaptionText | アクティブでないキャプションのテキスト | GrayText |
| InfoBackground | ツールチップの背景 | Canvas |
| InfoText | ツールチップのテキスト | CanvasText |
| Menu | メニューの背景 | Canvas |
| MenuText | メニューのテキスト | ButtonBorder |
| Scrollbar | スクロールバーの背景 | Canvas |
| ThreeDDarkShadow | 二重の境界線で立体的に見える要素の光源を向いていない暗い色の境界線 | ButtonBorder |
| ThreeDFace | 二重の境界線で立体的に見える要素の光源を向いている明るい色の境界線 | ButtonFace |
| ThreeDHighlight | 二重の境界線で立体的に見える要素の背景 | ButtonBorder |
| ThreeDLightShadow | 二重の境界線で立体的に見える要素の光源を向いている暗い色の境界線 | ButtonBorder |
| ThreeDShadow | 二重の境界線で立体的に見える要素の光源を向いていない明るい色の境界線 | ButtonBorder |
| Window | ウィンドウの背景 | Canvas |
| WindowFrame | ウィンドウの枠 | ButtonBorder |
| WindowText | ウィンドウのテキスト | CanvasText |
