目次

基本16色

システム・カラー

UAの独自拡張キーワード

カラー・チャート

基本16色

HTML4.0以降では、aqua(#00FFFF)、black(#000000)、blue(#0000FF)、fuchsia(#FF00FF)、gray(#808080)、green(#008000)、lime(#00FF00)、maroon(#800000)、navy(#000080)、olive(#808000)、purple(#800080)、red(#FF0000)、silver(#C0C0C0)、teal(#008080)、white(#FFFFFF)、yellow(#FFFF00)の16色が用意されています。CSSでもこれがそのまま使えます。

システム・カラー

CSS2になって、よりユーザの環境を考えようという事になり、システム色というものが導入されました。これには、

1. ユーザの感覚にフィットしたページを作成出来る。
2. 閲覧時のユーザ設定が何らかの身体障害に関わりある場合、よりアクセシビリティの高いページを作成出来る。

という二つの利点があります。

大文字小文字の区別はありませんが、書き方は統一しておいたほうが、後で自分が見直す時に分かりやすいです。

システム色には、以下のような種類があります。矢印先の箱に表示されているのが、現在ご利用のPC内で設定されている色です。

ActiveBorder

アクティブウィンドウの境界色→　

ActiveCaption

アクティブウィンドウのタイトルバーの色→　

AppWorkspace

様々な文書インターフェースの背景色→　

Background

デスクトップの背景色→　

ButtonFace

ボタン表面の色→　

ButtonHighlight

選択状態のボタンの色→　

ButtonShadow

ボタンの影の色→　

ButtonText

ボタンの文字色→　

CaptionText

タイトルバー、四隅のサイズ変更ボックス、スクロールバーの矢印などの文字色→　

GrayText

使用不可を表すグレーですが、これを扱っていない場合は#000を用います→　

Highlight

選択領域の色→　

HighlightText

選択領域の文字色→　

InactiveBorder

非アクティブウィンドウの境界色→　

InactiveCaption

非アクティブウィンドウのタイトルバーの色→　

InactiveCaptionText

非アクティブタイトルバーの文字色→　

InfoBackground

ヒント表示の背景色→　

InfoText

ヒント表示の文字色→　

Menu

メニューの背景色→　

MenuText

メニューの文字色→　

Scrollbar

スクロールバーの色→　

ThreeDDarkShadow

3Dオブジェクトの暗い影の色(光源の反対側の辺)→　

ThreeDFace

3Dオブジェクト表面の色→　

ThreeDHighlight

3Dオブジェクト選択時の色→　

ThreeDLightShadow

3Dオブジェクトの明るい影の色(光源側の辺)→　

ThreeDShadow

3Dオブジェクトの影の色→　

Window

ウィンドウの背景色→　

WindowFrame

ウィンドウの骨組みの色→　

WindowText

ウィンドウの文字色→　

段落の文字色と背景色をユーザのウィンドウと同じに設定する場合、以下のように記述します。
p {
color: WindowText;
background-color: Window;
}

UAの独自拡張キーワード

その他、InternetExplorer4以降やNetscapeNavigator4以降では独自に、以下のようなキーワードが用意されています。
※太字のものはHTML4.0以降で定義されている色です