色について。
CSSにおける色に関して解説します。
CSSでの色指定の方法。
CSSでの色指定の方法は以下のものがあります。
色を十六進数三桁で指定する。
「#」に続けて、赤・緑・青各成分の値を十六進数一桁ずつで記述します。
例えば、青なら#00Fと記述します。
- 十六進数六桁で指定する際に、各成分の上の桁と下の桁が同じ数字の場合、この表記法が使えます。
色を赤・緑・青各成分の数値で指定する。
「rgb(R,G,B)」と言う形で指定します。
R, G及びBはそれぞれ赤, 緑及び青の成分で0から255までの整数またはパーセンテージで指定します。
例えば、黄色ならrgb(255, 255, 0)またはrgb(100%, 100%, 0%)などとと記述します。
色を色名で指定する。
CSS の標準規格では以下の十七色について名前が指定されております。
black- 黒です。
#000000及び#000と同じです。 silver- 銀色です。
#c0c0c0と同じです。 gray- 灰色です。
#808080と同じです。 white- 白です。
#ffffff及び#fffと同じです。 maroon- 臙脂色です。
#800000と同じです。 red- 赤です。
#ff0000及び#f00と同じです。 purple- 赤紫です。
#800080と同じです。 fuchsia- ピンクです。
#ff00ff及び#f0fと同じです。 green- 緑です。
#008000と同じです。 lime- 黄緑です。
#00ff00及び#0f0と同じです。 olive- 黄土色です。
#808000と同じです。 yellow- 黄色です。
#ffff00及び#ff0と同じです。 navy- 紺です。
#000080と同じです。 blue- 青です。
#0000ff及び#00fと同じです。 teal- 青緑です。
#008080と同じです。 aqua- 水色です。
#00ffff及び#0ffと同じです。 orange- 橙です。
#ffa500と同じです。
仕様で定められている十六色以外にも、環境に依っては独自に定められた名前が利用出来るものもあり、仕様上はそう言った値を指定しても良い事になっております。
- その中で一部広く普及していると思われるコードについては、次世代の CSS 規格となる CSS 第三水準 で規格化される予定となっております。
- 拡張カラーキーワード… CSS 第三水準草案・カラーモジュール内の一節
色をシステム名で指定する。
ユーザエージェントの設定(例えば、OSなどで設定されるウィンドウのデフォルト色など)に従って色を指定すると言うものです。
これらの色を用いる事で、OSなどの基本設定に忠実な色遣いになり、特にユーザ補助で色を設定している閲覧者にはより見易いものとなるでしょう。
システム名を用いる場合の注意事項。
- 具体的な色指定とは合わない恐れがあります。
- 例えば、システムでウィンドウの背景色が黒に設定されている場合に背景色を
Window、前景色を#000(黒)などとした場合、前景は背景に完全に紛れて見えなくなる筈です。このように、具体的な色を併用する場合にシステム色と合わない恐れがあります。
- 該当するパーツが無い場合。
- システムに該当するパーツが存在しない場合は、ユーザエージェントはそれに近いパーツの色かデフォルト色を適切に当てる事が望ましいとされております。
例えば、ウィンドウが常に一つしか表示出来ない環境で「
InactiveCaptionText」すなわち現在操作の対象となっていないウィンドウの前景色を指定されている場合、該当するものが無いため、代わりに「WindowText」すなわちウィンドウ内の前景色で使われる色を利用するなどします。 - ネットスケープ 4.xでは使えません。
- ネットスケープ 4.xではこれらのシステム名は使えません。
- WAP 2.0では定義されておりません。
- WAP 2.0ではこれらのシステム名は定義されておりません。従ってWAP 2.0でもこれらのシステム名は使えません。