HTML での色指定アドバイス

色指定を活用すると、画像を使わずにカラフルに表現する事が出来ます。
構成によっては画像の読み込み時間を短縮でき、一石二鳥です。
(このサイトも、殆ど画像を使用していません。HTMLでの色指定で表現しています。しかし、あまりにも多く色指定している為、テキストのみでありながら重く感じるページがあると思いますが...(^^;)

色指定のできるタグは次のような種類があります。

タグサポートサンプル
BGCOLOR での指定
<BODY>
  <BODY BGCOLOR="#FFFFFF">-</BODY>
背景色の他に、同時に以下の指定が可能
TEXT="#000000"(文字色)
LINK="#0000FF"(リンク色)
VLINK="#660066"(リンク済色)
ALINK="#660066"(リンク選択色)
<TABLE>
<TR>
<TH>
<TD>
(IE3.0-,NN3.0-)
<TABLE BORDER BGCOLOR="#33CC33">
<TR BGCOLOR="#CC3333">
<TH BGCOLOR="#CCCC33">-1-</TH>
<TD>-2-</TD>
</TR><TR>
<TH>-3-</TH>
<TD BGCOLOR="#3333CC">-4-</TD>
</TR></TABLE>
-1- -2-
-3- -4-
NNでは、<TABLE> に色指定しても、枠に色が付きません。ご注意下さい。
<MARQUEE> (IE3.0-)
<MARQUEE BGCOLOR="#FFFFCC">-</MARQUEE>
<LAYER> (NN4.0-)
<LAYER BGCOLOR="#FFFFCC">-</LAYER>
COLOR での指定
<FONT>  <FONT COLOR="#CC0000">-</FONT>
<HR> (IE3.0-)
<HR COLOR="#000000">
BORDERCOLOR での指定
<TABLE> (IE3.0-,NN4.0-)
<TABLE BORDERCOLOR="#FF0000">-</TABLE>
<FRAMESET> (NN3.0-,IE4.0-)
<FRAMESET BORDERCOLOR="#FFFFFF">-</FRAMESET>


色指定の方法
" と " の間に、16進数か色名を記入します。
例えば同じ赤でも、"#FF0000" と "red" という2種類の書き方ができます。

16進数は左からR(Red),G(Green),B(Blue)の値です。
例えば、[#FF0000]の場合は、R=FF(255),G=00(0),B=00(0) で赤い色が表示します。
Web Color の場合は、必ず、[00],[33],[66],[99],[CC],[FF]の組み合わせとなります。


色指定時の注意点
■ HTMLでの色指定にはブラウザに依存される事に注意しなければなりません。
<BODY> 及び <FONT> での指定は、ほぼどのブラウザでも認識されますが、ブラウザ固有のタグや、バージョンによる違いなども考慮しながら作成する事をおすすめします。

例えば、<TABLE> に背景色を指定し、中の文字に <FONT> で反転する色を指定をしたとします。
サンプル
文字を目立たせようとしたつもりが、もしもブラウザが、<TABLE> の背景色指定がサポートされてなく、<FONT> の色指定はサポートされていたとしたら、この文字は逆に目立たなくなってしまいます。
この場合、画像で作成するか、もしくは文字で色指定を行う場合は、もしも背景色が表示しなくても問題が無いように記述する必要があると思います。

■ <BODY> で背景に画像を指定している場合でも、背景色を指定する事をおすすめします。
背景の画像が例えば黒っぽいものだとします。そして、<BODY> には文字色を白に設定していたとします。 背景が表示すれば勿論ハッキリと文字は読めるのですが、背景画像を読み込んでいる途中はユーザーの設定(大体は白か灰色)で背景色が表示する事になり、画像が読み込まれるまで文字が良く見えない状態となってしまいます。

背景画像は思ったより読み込みに時間がかかる事があります。又、何かの都合で正しく画像が読み込めなかった場合も考慮する必要があると思います。

この現象を回避するために、<BODY> には背景色も同時に指定しておくと、画像が読み込まれるまではその背景色で表示してくれる為、画像が表示していない間も文字を読む事が出来るのです。

■ 色は、なるべく WebColor を使用する事をおすすめします。
Web Color を選ぶ理由をご覧下さい。


  Red Orange Yellow Spring Green Teal Cyan Azure Blue Violet Magenta Pink  
| about | color table 96 | color table 216 | webcolor data | color name 140 | color select | download | HTML tag | ranking |
WEB COLOR 216
© NOZ