Edit

Page

Page title:

Page body:

[1] [DFN[[RUBYB[[[システム色]]]@en[System Colors]]]]は、[[システム]]において [[UI]]
の構成要素に与えられている[[色]]を表す[[キーワード]]です。

* 代替

[2] [[システム色]]は [[CSS2]] で導入されましたが、 [[CSS3]] で[[非推奨]] [SRC[>>3]] とされています。

[38] [[システム色]]は複数の[[特性]]で特定の組み合わせを指定することにより当該[[システム]]の [[UI]]
を再現しようとするものですが、[[色]]も含めた様々な見た目を一括で指定できる [CODE(CSS)@en['[[appearance]]']] 
[[特性]]を使う方が望ましいとされています [SRC[>>3]]。

* 仕様書

- [3] [CITE@en[CSS Color Module Level 3]] ([TIME[2011-06-07 21:54:38 +09:00]] 版) <http://www.w3.org/TR/2011/REC-css3-color-20110607/#css2-system>

* システム色の一覧

[36] [[システム色]]の名前と意味は次の通りです [SRC[>>3]]。

:[8] [CODE(CSS)@en[[[ActiveBorder]]]]:[[活性窓]]の[[境界線]]の[[色]]です。
:[9] [CODE(CSS)@en[[[ActiveCaption]]]]:[[活性窓]]の[[見出し]]の[[色]]です。
:[10] [CODE(CSS)@en[[[AppWorkspace]]]]:[[MDI]] の[[背景色]]です。
:[11] [CODE(CSS)@en[[[Background]]]]:[[デスクトップ]]の[[背景色]]です。
:[12] [CODE(CSS)@en[[[ButtonFace]]]]:周りに[[境界線]]の層が1つあって[[三次元]]に見える[[三次元]]要素の[RUBYB[表面]@en[face]]の部分の[[背景色]]です。
:[13] [CODE(CSS)@en[[[ButtonHighlight]]]]:周りに[[境界線]]の層が1つあって[[三次元]]に見える[[三次元]]要素の[[光源]]側の部分の[[背景色]]です。
:[14] [CODE(CSS)@en[[[ButtonShadow]]]]:周りに[[境界線]]の層が1つあって[[三次元]]に見える[[三次元]]要素の[[光源]]から遠い側の部分の[[背景色]]です。
:[15] [CODE(CSS)@en[[[ButtonText]]]]:[[押しボタン]]の[[文字色]]です。
:[16] [CODE(CSS)@en[[[CaptionText]]]]:[[見出し]]、[[サイズ箱]]、[[スクロールバー]]の[[矢印箱]]の[[文字色]]です。
:[17] [CODE(CSS)@en[[[GrayText]]]]:[[灰色化]]された ([[無効]]状態の) [[文字色]]です。
[[現在ディスプレイ]]の[[ドライバー]]が[RUBYB[[[立体灰色]]]@en[solid gray color]]に対応していないなら、
[CODE(CSS)[[['''#'''000]]]] ([[黒]]) です。
:[18] [CODE(CSS)@en[[[Highlight]]]]:[[制御子]]中で選択されている項目の[[色]]です。
:[19] [CODE(CSS)@en[[[HighlightText]]]]:[[制御子]]中で選択されている項目の[[文字色]]です。
:[20] [CODE(CSS)@en[[[InactiveBorder]]]]:[[非活性窓]]の[[枠線]]の[[色]]です。
:[21] [CODE(CSS)@en[[[InactiveCaption]]]]:[[非活性窓]]の[[見出し]]の[[色]]です。
:[22] [CODE(CSS)@en[[[InactiveCaptionText]]]]:[[非活性窓]]の[[見出し]]の[[文字色]]です。
:[23] [CODE(CSS)@en[[[InfoBackground]]]]:[[ツールチップ]]の[[背景色]]です。
:[24] [CODE(CSS)@en[[[InfoText]]]]:[[ツールチップ]]の[[文字色]]です。
:[25] [CODE(CSS)@en[[[Menu]]]]:[[メニュー]]の[[背景色]]です。
:[26] [CODE(CSS)@en[[[MenuText]]]]:[[メニュー]]の[[文字色]]です。
:[27] [CODE(CSS)@en[[[Scrollbar]]]]:[[スクロールバー]]の[RUBYB[灰色領域]@en[gray area]]の[[色]]です。
:[28] [CODE(CSS)@en[[[ThreeDDarkShadow]]]]:周りに[[同心]][[境界線]]の層が2つあって[[三次元]]に見える[[三次元]]要素の[[光源]]から遠い部分の暗い方 (通常は外側) の[[色]]です。
:[29] [CODE(CSS)@en[[[ThreeDFace]]]]:周りに[[同心]][[境界線]]の層が2つあって[[三次元]]に見える[[三次元]]要素の[RUBYB[表面]@en[face]]の[[背景色]]です。
:[30] [CODE(CSS)@en[[[ThreeDHighlight]]]]:周りに[[同心]][[境界線]]の層が2つあって[[三次元]]に見える[[三次元]]要素の[[光源]]に近い部分の明るい方 (通常は外側) の[[色]]です。
:[31] [CODE(CSS)@en[[[ThreeDLightShadow]]]]:周りに[[同心]][[境界線]]の層が2つあって[[三次元]]に見える[[三次元]]要素の[[光源]]に近い部分の暗い方 (通常は内側) の[[色]]です。
:[32] [CODE(CSS)@en[[[ThreeDShadow]]]]:周りに[[同心]][[境界線]]の層が2つあって[[三次元]]に見える[[三次元]]要素の[[光源]]から遠い部分の明るい方 (通常は内側) の[[色]]です。
:[33] [CODE(CSS)@en[[[Window]]]]:[[窓]]の[[背景色]]です。
:[34] [CODE(CSS)@en[[[WindowFrame]]]]:[[窓]]の[[枠]]の[[色]]です。
:[35] [CODE(CSS)@en[[[WindowText]]]]:[[窓]]の[[文字色]]です。

* 構文

[6] [[システム色]]は [[CSS]] の[[キーワード]]として表します。[[システム色]]は [CODE(CSS)@en[[[<color>]]]]
を使える場所で使うことができます。

[7] [[システム色]]は[[大文字・小文字不区別]]ですが、仕様書において記述されている、
読みやすい[[大文字]]と[[小文字]]を混合した書き方を使う[['''べき''']]とされています [SRC[>>3]]。

* レンダリング

[4] 相当する値を持たない[[システム]]にあっては、最も近いシステム色の値とするか、または何らかの既定の[[色]]とする[['''べきです''']]。
[SRC[>>3]]

* プロファイル

[5] [[CSS]] の[[プロファイル]]によっては[[システム色]]に全く対応していません。 [SRC[>>3]]

* 文脈

[54] [CODE[SVG ][SVG-in-OpenType]] では禁止されています。

* 歴史

** CSS2

- [39] [CITE@en[User interface]] ([TIME[2011-06-07 22:09:52 +09:00]] 版) <http://www.w3.org/TR/CSS2/ui.html#system-colors>

[40] [[システム色]]は [[CSS 2.0]] で導入されました。

[41] [[CSS 2.1]] には、 [[CSS3]] では[[非推奨]]となっている、と注意書きがあります [SRC[>>39]]。

* 関連

[42] 同様に[[システム]]における[[フォント]]設定を表している「[[システム・フォント]]」を
[CODE(CSS)@en['[[font]]']] [[特性]]に指定できます。

* 例

[37] 
[PRE(CSS example code)[
p { color: WindowText; background-color: Window }
]PRE]

[[段落]]を[[窓]]の[[前景色]]と[[背景色]]により[[レンダリング]]します [SRC[>>3]]。

[43] [CITE@en[CSS Basic User Interface Module Level 3 (CSS3 UI)]]
( ([[Tantek Çelik]] 著, [TIME[2012-01-13 20:03:30 +09:00]] 版))
<http://www.w3.org/TR/2012/WD-css3-ui-20120117/#changes-list>

[44] [CITE@en[''''''[''''''css-colors'''''']'''''' Specify the System Colors colors]]
( ([[Simon Pieters]] 著, [TIME[2013-08-30 19:35:06 +09:00]] 版))
<http://lists.w3.org/Archives/Public/www-style/2013Aug/0667.html>

[45] [CITE@en[''''''[''''''Fwd: System colors'''''']'''''']]
( ([[L. David Baron]] 著, [TIME[2013-08-31 00:05:46 +09:00]] 版))
<http://lists.w3.org/Archives/Public/www-archive/2013Aug/0027.html>

[46] [CITE@en[CSS System colors]]
( ([[Simon Pieters]] 著, [TIME[2013-08-30 19:21:05 +09:00]] 版))
<http://lists.w3.org/Archives/Public/www-archive/2013Aug/0026.html>

[47] [CITE[gecko-dev/widget/windows/nsLookAndFeel.cpp at master · mozilla/gecko-dev]]
( ([TIME[2014-02-05 05:07:46 +09:00]] 版))
<https://github.com/mozilla/gecko-dev/blob/master/widget/windows/nsLookAndFeel.cpp>

[48] [CITE@en[GetSysColor function (Windows)]]
( ([TIME[2014-02-05 05:09:17 +09:00]] 版))
<http://msdn.microsoft.com/en-us/library/windows/desktop/ms724371(v=vs.85).aspx>

[49] [CITE@en-US[<color> - CSS | MDN]]
( ([TIME[2014-01-15 13:15:09 +09:00]] 版))
<https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#System_Colors>

[50] [CITE@en['''['''css-color-3''']''' Remove old note for the appearance property]]
([[GloverDonovan]]著, [TIME[2018-02-20 01:30:49 +09:00]])
<https://github.com/w3c/csswg-drafts/commit/43b163e4445b9935c0bae38f1a5b0f803d25ff69>

[51] [CITE@en['''['''css-color-3''']''' Remove old note for the appearance property by GloverDonovan · Pull Request #2334 · w3c/csswg-drafts]]
([TIME[2018-05-08 21:34:04 +09:00]])
<https://github.com/w3c/csswg-drafts/pull/2334>

[52] [CITE@en['''['''css-color-3''']''' Dangling link to `appearance` property in CR of Color-3 · Issue #2089 · w3c/csswg-drafts]]
([TIME[2018-05-08 21:34:55 +09:00]])
<https://github.com/w3c/csswg-drafts/issues/2089>

[53] [CITE@en[system colors posts from 2001]]
([[L. David Baron]]著, [TIME[2019-04-12 14:11:55 +09:00]])
<https://lists.w3.org/Archives/Public/www-archive/2019Apr/0000.html>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)