HTMLでの色指定は旧来は属性を用いて行われていました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<title>テストページ</title>
</head>
<body bgcolor="aqua" text="black" link="#228b22" alink="#ff7f50"
vlink="#ff69b4">
<center>
WWW関係の<font color="red">標準化</font>は<a href="http://www.w3.org/">W3C</a>によって行われています
</center>
</body>
</html>
しかし、HTML4からは色に関する属性は全て将来廃止予定となり、スタイルシートの
使用が薦められています。
上の例はスタイルシートを使うと次のようになります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>テストページ</title>
<style type="text/css"><!--
body {
/* body要素のセレクタ */
color: black;
/* 文字色 */
background-color: aqua;
/* 背景色 */
}
a { color: #228b22; }
/* リンクの文字色 */
a:hover { color: #ff7f50; }
/* リンクにマウスカーソルが乗ったときの文字色 */
a:visited { color: #ff69b4; }
/* 訪問済リンクの文字色 */
p { text-align: center; }
/* p要素内の文章の中央寄せ */
.std { color: red; }
/* クラス名stdの文字色 */
--></style>
</head>
<body>
<p>
WWW関係の<span class="std">標準化</span>は<a href="http://www.w3.org/">W3C</a>によって行われています
</p>
</body>
</html>
色はカラーキーワード(色名)またはRGB値を使って指定します。
定義されているキーワードはHTML4.01では16色、CSS2.1ではHTML4.01の16色に
orangeを加えた17色とtransparentという特別なキーワードがあります。
black
#000000 |
silver
#c0c0c0 |
gray
#808080 |
white
#ffffff |
maroon
#800000 |
red
#ff0000 |
purple
#800080 |
fuchsia
#ff00ff |
green
#008000 |
lime
#00ff00 |
olive
#808000 |
yellow
#ffff00 |
navy
#000080 |
blue
#0000ff |
teal
#008080 |
aqua
#00ffff |
orange
#ffa500 |
transparent
|
|
|
Netscape社のブラウザNetscape Navigator 2.0以来、140色のキーワード(X11COLORS)が
定着し、どのブラウザでもサポートされてはいますが、この中で正式に標準となる色の
キーワードは上記の17色のみです。
140色のキーワードは、こちらをご覧ください →
X11COLORS(要JavaScript)
RGB値はHTML4.01では16進数6桁の #RRGGBB のみ指定が可能ですが、CSS2.1では
16進数6桁を簡略化した16進数3桁の #RGB や、10進数(0〜255)または百分率で
rgb(R,G,B)とする記法も指定出来ます。
例えば黄色はキーワードでyellow、16進数6桁で#ffff00、16進数3桁で#ff0、
10進数でrgb(255,255,0)、百分率ではrgb(100%,100%,0%)となり、これらは全て
等価です。
使用例
<style type="text/css"><!--
.aaa {
/* クラス名aaaのクラスセレクタ */
color: rgb(127,0,255);
/* 文字色 */
background-color: rgb(80%,100%,75%);
/* 背景色 */
border: dashed 1px #0af;
/* 境界(ボーダー) */
}
--></style>
<span class="aaa">あああ</span>
あああ
CSS2.1では、この他にシステムカラーを指定する事により、
システムの
GUI各部
と同じ色を用いる事が出来ます。
指定方法はカラーキーワードと同様です。
| 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 | ウィンドウの文字色
|