Mar. 1st,2021
“システムカラー”とは？
＃
“<system-color>”値
“<system-color>”値はユーザー、ブラウザ、OSが選択した既定の色を表すキーワードです。“システムカラー(System Colors)”とも呼ばれ、一般的にユーザー・エージェントのデフォルトのスタイルシートに使用されます。
システムカラーはカラーネームのような決められた一定の色ではなく、ユーザーの選択やユーザー・エージェントやデバイスの設定によって異なる色が選択されて使用されます。
ユーザー・エージェントが強制カラー・モードに設定されている場合には一部のプロパティによる色の指定は強制的にシステムカラーに変更されます。それ以外のプロパティの色の指定も“<system-color>”値で行うことで、全体の配色の整合性をとることができ、読みやすさを確保することができます。
システムカラーはテキストなどに使用される前景色と背景色のペアになっています。前景色と背景色は可読性を確保するために明暗の差が十分あるように選択されます。
前景色と背景色の一方だけを“<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 |
