<system-color>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

* Some parts of this feature may have varying levels of support.

<system-color> はCSS のデータ型で、ウェブページの様々な部分に通常使用する既定の色を反映します。

しかし、ユーザーエージェントは強制色モードと呼ばれるアクセシビリティ機能を提供することができ、このモードでは色はユーザーとユーザーエージェントが定義したパレットに制限され、特定のプロパティで作者が選択した色を上書きします。強制色モードでは、<system-color> は選択された色を公開するので、ページの残りの部分はそれらと統合することができます。強制色モードの例としては、Windows の高コントラストモードがあります。

強制色モードでは、作者は<system-color> 型の色を、色がオーバーライドされるプロパティの設定にはないすべてのプロパティに使用するべきです。これにより、ページがすべてのプロパティで一貫して同じ色パレットを使用することを保証します。

作者はforced-colors メディア特性を使用して、強制色モードを検出することができます。

<system-color> 値は、<color> を使用できる場所であればどこでも使用することができます。

構文

これらのキーワードは大文字と小文字を区別しませんが、ここでは読み取り可能なように大文字と小文字を混合して掲載しています。

設定に応じて、表に表示されるサンプルカラーは変化する場合があります。また、さまざまなブラウザー、オペレーティングシステム、システム設定でこのページを表示すると、違いを調べることができます。

キーワード	説明	サンプル
`AccentColor`	アクセント付きユーザーインターフェイスコントロールの背景です。
`AccentColorText`	アクセント付きユーザーインターフェイスコントロールのテキストです。
`ActiveText`	アクティブリンクのテキストです。
`ButtonBorder`	コントロールのベース境界色です。
`ButtonFace`	コントロールの背景色です。
`ButtonText`	コントロールのテキスト色です。
`Canvas`	アプリケーションのコンテンツや文書の背景です。
`CanvasText`	アプリケーションのコンテンツや文書のテキスト色です。
`Field`	入力フィールドの背景です。
`FieldText`	入力フィールドのテキストです。
`GrayText`	無効なアイテム（無効なコントロールなど）の文字色です。
`Highlight`	選択中のアイテムの背景です。
`HighlightText`	選択中のアイテムのテキスト色です。
`LinkText`	非アクティブ、未訪問リンクのテキストです。
`Mark`	特別にマークされたテキストの背景（HTML の`mark` 要素など）です。
`MarkText`	特別にマークされたテキスト（HTML の`mark` 要素など）です。
`SelectedItem`	選択されたアイテム（選択されたチェックボックスなど）の背景です。
`SelectedItemText`	選択されたアイテムのテキストです。
`VisitedText`	訪問済みリンクのテキストです。

非推奨のシステム色キーワード

以下のキーワードは、以前のバージョンの CSS カラーモジュールで定義されていました。これらを公開ウェブページで使用することは非推奨になりました。

Menu非推奨;: メニューの背景。MenuText または-moz-MenuBarText の前景色と一緒に使用してください。
MenuText非推奨;: メニューのテキスト。Menu の背景色と一緒に使用してください。
Scrollbar非推奨;: スクロールバーの背景色です。
ThreeDDarkShadow非推奨;: 境界線が同心円状に 2 層になっているために立体的に現れる 3D 要素の、光源から離れた 2 つの境界線のうち、暗い方（一般に外側）の色。
ThreeDFace非推奨;: 境界線が同心円状に 2 層になっているために立体的に現れる 3D 要素の表面の背景色。ButtonText の前景色と一緒に使用してください。
ThreeDHighlight非推奨;: 境界線が同心円状に 2 層になっているために立体的に現れる 3D 要素の、光源に面する 2 つの境界線のうち、明るい方（一般に外側）の色。
ThreeDLightShadow非推奨;: 境界線が同心円状に 2 層になっているために立体的に現れる 3D 要素の、光源に面する 2 つの境界線のうち暗い方（一般に内側）の色。
ThreeDShadow非推奨;: 境界線が同心円状に 2 層になっているために立体的に現れる 3D 要素の、光源から離れた 2 つの境界線のうち、明るい方（一般に内側）の色。
Window非推奨;: ウィンドウの背景です。WindowText の前景色と一緒に使用してください。
WindowFrame非推奨;: ウィンドウの枠です。
WindowText非推奨;: ウィンドウ内のテキストです。ウィンドウの背景色Window と共に使用してください。

キーワード	説明	置き換え
`ActiveBorder`	アクティブウィンドウの境界線。	`ButtonBorder`
`ActiveCaption`	アクティブウィンドウのキャプション。前景色としては`CaptionText` を使用してください。	`Canvas`
`AppWorkspace`	複数文書インターフェイスの背景色。	`Canvas`
`Background`	デスクトップの背景。	`Canvas`
`ButtonHighlight`	境界線のレイヤーによって立体的に現れる 3D 要素の、光源に面する境界線の色。	`ButtonFace`
`ButtonShadow`	境界線のレイヤーによって立体的に現れる 3D 要素の、光源から離れた境界線の色。	`ButtonFace`
`CaptionText`	キャプション、サイズボックス、スクロールバーの矢印ボックスのテキスト。`ActiveCaption` の背景色と一緒に使用してください。	`CanvasText`
`InactiveBorder`	非アクティブウィンドウの境界線。	`ButtonBorder`
`InactiveCaption`	非アクティブウィンドウのキャプション。`InactiveCaptionText` の前景色と一緒に使用してください。	`Canvas`
`InactiveCaptionText`	非アクティブキャプションのテキストの色。`InactiveCaption` の背景色と一緒に使用してください。	`GrayText`
`InfoBackground`	ツールチップコントロールの背景色。`InfoText` の前景色と一緒に使用してください。	`Canvas`
`InfoText`	ツールチップコントロールの文字色。`InfoBackground` の背景色と一緒に使用してください。	`CanvasText`
`Menu`	メニューの背景。`MenuText` または`-moz-MenuBarText` の前景色と一緒に使用してください。	`Canvas`
`MenuText`	メニューのテキスト。`Menu` の背景色と一緒に使用してください。	`CanvasText`
`Scrollbar`	スクロールバーの背景色です。	`Canvas`
`ThreeDDarkShadow`	境界線が同心円状に 2 層になっているために立体的に現れる 3D 要素の、光源から離れた 2 つの境界線のうち、暗い方（一般に外側）の色。	`ButtonBorder`
`ThreeDFace`	境界線が同心円状に 2 層になっているために立体的に現れる 3D 要素の表面の背景色。`ButtonText` の前景色と一緒に使用してください。	`ButtonFace`
`ThreeDHighlight`	境界線が同心円状に 2 層になっているために立体的に現れる 3D 要素の、光源に面する 2 つの境界線のうち、明るい方（一般に外側）の色。	`ButtonBorder`
`ThreeDLightShadow`	境界線が同心円状に 2 層になっているために立体的に現れる 3D 要素の、光源に面する 2 つの境界線のうち暗い方（一般に内側）の色。	`ButtonBorder`
`ThreeDShadow`	境界線が同心円状に 2 層になっているために立体的に現れる 3D 要素の、光源から離れた 2 つの境界線のうち、明るい方（一般に内側）の色。	`ButtonBorder`
`Window`	ウィンドウの背景です。前景色`WindowText` と一緒に使用してください。	`Canvas`
`WindowFrame`	ウィンドウの枠です。	`ButtonBorder`
`WindowText`	ウィンドウ内のテキストです。背景色`Window` と共に使用してください。	`CanvasText`

例

システムカラーの使用

この例では、通常box-shadow プロパティを使ってコントラストを取得するボタンがあります。強制色モードでは、box-shadow は強制的にnone になるので、この例ではforced-colors メディア特性を使用して、適切な色（この用途ではButtonBorder）の境界線が確実に表示されるようにします。

HTML

html

<button>押してください</button>

CSS

css

.button {  border: 0;  padding: 10px;  box-shadow:    -2px -2px 5px gray,    2px 2px 5px gray;}@media (forced-colors: active) {  .button {    /* forced-colors モードでは box-shadow は強制的に 'none' になるので、    代わりに境界を使用します。 */    border: 2px ButtonBorder solid;  }}