CSS3: color プロパティ - 文字や前景の色

■ 概要

項  目説  明
記述形式 セレクタ {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 色の名前表 示
#ffffffwhite
#c0c0c0silver
#0000ffblue
#00ffffaqua
#00ff00lime
#ffff00yellow
#ff0000red
#ff00fffuchsia
#808080gray
#008080teal
#000000black
#000080navy
#008000green
#808000blue
#800000maroon
#800080purple

なお、色の名前の一覧原色大辞典ブラウザで名前が定義されている140色の色名,RGB の 16進数による色の一覧は、同じくカラーコード順のカラーチャートなどを参照してください。

CSS3 では,色の名前16進数による色指定 のほかに,RGBカラー(rgb( ))RGBAカラー(rgba( ))HSLカラー(hsl( ))HSLAカラー(hsla( )) などによる色指定の方法が提供されています。 ただし,ブラウザーがこれらの色指定方法に対応してない場合には, 色指定が無視された形の表示になりますので,注意が必要です。

また,CSS3 では,色を表すキーワード として,次のものが使用できます。

キーワード表 示 色
 transparent 透明であるかのように背景色で表示されます。
 currentColorcolorプロパティ の色の値を参照するときに 使用できます。 colorプロパティ での指定色で用いた場合は inherit と同様になります。

■ 使用例( color プロパティの利用)

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

■ 備考