[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]] 版) * システム色の一覧 [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[[[]]]] を使える場所で使うことができます。 [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]] 版) [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]] 版)) [44] [CITE@en[''''''[''''''css-colors'''''']'''''' Specify the System Colors colors]] ( ([[Simon Pieters]] 著, [TIME[2013-08-30 19:35:06 +09:00]] 版)) [45] [CITE@en[''''''[''''''Fwd: System colors'''''']'''''']] ( ([[L. David Baron]] 著, [TIME[2013-08-31 00:05:46 +09:00]] 版)) [46] [CITE@en[CSS System colors]] ( ([[Simon Pieters]] 著, [TIME[2013-08-30 19:21:05 +09:00]] 版)) [47] [CITE[gecko-dev/widget/windows/nsLookAndFeel.cpp at master · mozilla/gecko-dev]] ( ([TIME[2014-02-05 05:07:46 +09:00]] 版)) [48] [CITE@en[GetSysColor function (Windows)]] ( ([TIME[2014-02-05 05:09:17 +09:00]] 版)) [49] [CITE@en-US[ - CSS | MDN]] ( ([TIME[2014-01-15 13:15:09 +09:00]] 版)) [50] [CITE@en['''['''css-color-3''']''' Remove old note for the appearance property]] ([[GloverDonovan]]著, [TIME[2018-02-20 01:30:49 +09:00]]) [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]]) [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]]) [53] [CITE@en[system colors posts from 2001]] ([[L. David Baron]]著, [TIME[2019-04-12 14:11:55 +09:00]])