このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

CSSの色~システムカラー

記事Mar. 1st,2021
CSSの“<color>”値、色についての解説。システムカラー、“<system-color>”値。
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

“システムカラー”とは?

<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
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク