項 目 | 説 明 |
---|---|
記述形式 | セレクタ {color: 色 } |
値 の形式 | #rrggbb (RGB16進) | 色の名前 | inherit |
初 期 値 | ブラウザーが設定します。 |
対応ブラウザー | C1+ / e3+ / N4+ / Fx1+ / Op6+ / Ch1+ / Sa1+ |
適用可能な要素 | すべての要素 |
継 承 | しない |
colorプロパティ は,要素内の 文字の色や前景の線の色 を指定します。
要素の色を設定するプロパティとしては、ほかに background-color(背景色), border-color(境界色), outline-color(輪郭色) の3つがあります。
色の指定方法は,"#" の後に R(赤),G(緑),B(青)の光の3原色をそれぞれ2桁の16進数で表した数値を並べた #rrggbb 形式で指定する方法や色の名前で指定する方法などがあります。(「色の値」を参照。)
以下に代表的な16色の #rrggbb と色の名前を示します。
#rrggbb | 色の名前 | 表 示 |
---|---|---|
#ffffff | white | |
#c0c0c0 | silver | |
#0000ff | blue | |
#00ffff | aqua | |
#00ff00 | lime | |
#ffff00 | yellow | |
#ff0000 | red | |
#ff00ff | fuchsia | |
#808080 | gray | |
#008080 | teal | |
#000000 | black | |
#000080 | navy | |
#008000 | green | |
#808000 | blue | |
#800000 | maroon | |
#800080 | purple |
なお、色の名前の一覧は原色大辞典のブラウザで名前が定義されている140色の色名,RGB の 16進数による色の一覧は、同じくカラーコード順のカラーチャートなどを参照してください。
CSS3 では,色の名前 や 16進数による色指定 のほかに,RGBカラー(rgb( )), RGBAカラー(rgba( )), HSLカラー(hsl( )), HSLAカラー(hsla( )) などによる色指定の方法が提供されています。 ただし,ブラウザーがこれらの色指定方法に対応してない場合には, 色指定が無視された形の表示になりますので,注意が必要です。
また,CSS3 では,色を表すキーワード として,次のものが使用できます。
キーワード | 表 示 色 |
---|---|
transparent | 透明であるかのように背景色で表示されます。 |
currentColor | colorプロパティ の色の値を参照するときに 使用できます。 colorプロパティ での指定色で用いた場合は inherit と同様になります。 |
HTMLソース | |
---|---|
CSS <head> ~ </head> |
<style type="text/css" media="screen, handheld, print, tv" > <!-- .color0 { color: #000000; } /* black */ .color1 { color: #ff0000; } /* red */ .color2 { color: #00ff00; } /* lime */ .color3 { color: #0000ff; } /* blue */ .color4 { color: #00cc00; } /* lightgreen */ .color5 { color: #ff6600; } /* orange */ .color6 { color: #ff00ff; } /* fuchsia */ .color7 { color: #ccffff; } /* lightblue */ .color8 { color: #ffffff; } /* white */ .color9 { color: #000099; } /* darkblue */ --> </style> |
HTML <body> ~ </body> |
<span class="color0;">黒色:black</span> <br><span class="color1">赤色:red</span> <br><span class="color2">ライム色:lime</span> <br><span class="color3">青色:blue</span> <br><span class="color4">明るい緑色:lightgreen</span> <br><span class="color5">オレンジ色:orange</span> <br><span class="color6">赤紫色:fuchsia</span> <br><span class="color7">水色:lightblue</span> <br><span class="color8" style="background-color:#000000;"> 白色:white</span> <br><span class="color9">暗い青色:darkblue</span> |
ブラウザー 表示例 |
---|
黒色:black
赤色:red ライム色:lime 青色:blue 明るい緑色:lightgreen オレンジ色:orange 赤紫色:fuchsia 水色:lightblue 白色:white 暗い青色:darkblue |