HOME >> スタイルシート > 色について

point 色について

HTMLで色を指定するには、カラー名かRGB値(#RRGGBB)で指定しましたが、スタイルシートでは、この他にも色を指定する方法があります。
スタイルシートで使える色指定方法
種類説明
#RRGGBBHTMLでおなじみの色を指定する方法です。
R(赤)、G(緑)、B(青)の値を16進数(数字とA〜F)をつかって、それぞれ2桁で指定します。理論上は、約1670万色表現できます。
#RGBR(赤)、G(緑)、B(青)の値を16進数(数字とA〜F)をつかって、それぞれ1桁で指定します。理論上は、約4100色表現できます。
カラー名これもHTMLでおなじみの色を指定する方法です。
redやblueなどのカラー名で指定します。
ブラウザによっては対応していないカラー名などもありますので、注意して下さい。
rgb(n,n,n)R(赤)、G(緑)、B(青)の値を10進数(0〜255)で指定します。
これも、#RRGGBBと同じく、理論上は、約1670万色表現できます。
rgb(n%,n%,n%)赤、緑、青の各色の強さをパーセントで指定します。
これらの他にも、システムカラーを使って色を指定することも出来ます。 システムカラーとは、WindowsやMacなどのOSによって管理されている色のことです。
これを使うと、ページを見ている人のOSの環境によって、異なる色を設定することが出来ます。
例えば、ページを見ている人のディスクトップの背景色が青色に設定されている場合、ページの背景色を同じ色の青色に、または、ディスクトップの背景色が緑色の場合は、ページの背景色を同じ色の緑色にすることなどが出来ます。詳しい説明は割愛されてもらいます。
サンプル - Microsoft Internet Explorer
ホーム(H)メニュー(M)戻る(B)進む(N)

#ff0000は、赤色です

#f00も、赤色です

redも、赤色です

rgb(255,0,0)も、赤色です

rgb(100%,0%,0%)も、赤色です
ソース
<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
</HEAD>
<BODY>
<H2 style="color:#ff0000">#ff0000は、赤色です</H2>
<H3 style="color:#f00">#f00も、赤色です</H3>
<P style="color:red">redも、赤色です</P>
<P style="color:rgb(255,0,0)">rgb(255,0,0)も、赤色です</P>
<DIV style="color:rgb(100%,0%,0%)">rgb(100%,0%,0%)も、赤色です</DIV>
</BODY>
</HTML> 
Copyright ©2001〜2011 まさぼ〜 All Right Reserved