XHTML/CSS・トップ | CSS基礎知識・目次

●色の指定形式

 CSSでの色の指定方法は6つあります。‘#’に続く、RGB値と言われるRed(赤)、Green(緑)、Blue(青)の値を00〜ffの16進数でそれぞれ6桁または3桁を指定する方法の二種類、RGB形式の10進数、および、%(パーセント)で指定する方法の計4種類、また、HTMLで定義されている色の名前を表すキーワードも使えます。もうひとつはシステムカラーで指定する方法です。この内、RGB形式の16進数(‘#’に続く、6桁の形式)と色の名前の指定方法はHTML 4.01 Transitional DTD、HTML 4.01 Frameset DTDのみで使えますが、使える場合であっても、HTMLのタグに色を指定する方法は推奨されないか、指定できなくなっています。色はスタイルシートで指定するようにしましょう。色名を表すキーワードとシステムカラーについては別項を参照していただくとして、ここでは、RGB値の色指定について解説します。RGB値の形式は4種類あり、次の指定はすべて同じ色を表しています。

em { color: #f00 }
em { color: #ff0000 }
em { color: rgb(255,0,0) }
em { color: rgb(100%, 0%, 0%) }

#RRGGBB値
 RGBはred(赤)、green(緑)、blue(青)の3原色を表します。‘#’に続き、red(赤)、green(緑)、blue(青)のそれぞれ2桁ずつの計6桁の16進数で指定します。16進数で使える値は0から9の数字とaからfのアルファベットの組み合わせで計16種類です。
例) #000000、#ff0000、#0000ffなど。(順に、black、red、blueの色)

#RGB値
 RGB値の形式は‘#’に続き、red(赤)、green(緑)、blue(青)のそれぞれ1桁ずつの計3桁の16進数で指定します。ここで指定した16進数の値は、各値のそれぞれ2桁ずつの計6桁に変換されます。RRGGBB値の形式を簡略した形です。例えば、RGB形式の#f0fはRRGGBB形式の#ff00ff(fuchsia=明るい赤紫色)にあたります。
そのほかの例) #000 = #000000、#f00 = #ff0000、#00f = #0000ff

rgb(255,0,0)
 関数表記でのRGB値の形式は、rgb(赤,緑,青)の各値を10進数で指定します。0から255の範囲内で整数値をコンマ( , )で区切り、3つ指定します。整数値255は100%に該当し、16進法の‘ff’または‘f’に該当します。
例) rgb(255,255,255) = rgb(100%,100%,100%) = #fff = #ffffff
なお、10進数とは「0」から「9」までの10種類の数字を用いた表記方法のことです。

rgb(100%, 0%, 0%)
 関数表記でのRGB値の形式は、rgb(赤,緑,青)の各値を0%から100%までの範囲内で3つのパーセントをコンマ( , )で区切って指定することもできます。

【参考】

 「#」は半角記号で「♯」のシャープと似ていますが、わが国では番号記号、井桁(いげた)、または、ナンバーサインと呼ばれていますが、そのほかにもいろいろな名称があります。

 "カラーコード"のキーワードで検索すると、カラーコードのサンプル色を提供しているサイトがいくつかありますので、参照することができます。

 当サイトの色指定のオススメは16進数の6桁ないし3桁のRGB形式です。それも将来を見据えるならば、(値を)半角英数字の小文字で統一しておくことをオススメします。

XHTML/CSS・目次 | CSS基礎知識・目次

(2009/06/21 改正)

Copyright (C) 2004-2009 http://www.xml.vc/