64歳パソコン教師の日記 NO.820 (2002.5.29)


 以前、色は16進数で「16,777,216色」を表示できると書きましたが、ホームページ上で「Windows」や「Macintosh」のように異なるOSであっても同じように表示される色を「Web Safe Color」といいます。

 英語のカラーネームも使えますが、正式に使用できるのは下記の16色だけで、それ以外の色はブラウザによって対応が異なります。正しい色で見て貰うには「Web Safe Color」を16進数で指定することです。

 black/gray/silver/white/blue/navy/teal/green/aqua/lime/yellow/  magenta/olive/purple/maroon/red

 今日は「Web Safe Color」のカラーサンプルを作ってみましょう。

 下記のソースをコピーして、→メモ帳に貼り付け、→「ファイル」→「名前を付けて保存」とクリック、→「ファイルの種類」を「すべてのファイル」とし、→「名前」欄に「safecolor.html」と入力、→「保存」ボタンをクリックします。メモ帳を閉じてから、→保存した「safecolor.html」をダブル クリックで開きます。

<HTML><BODY><DIV style="width:100%;font-family:times;font-size:24pt;
font-weight:bold;color:red;filter:shadow(color=gray, direction=150)" 
align="center">216 WEB SAFE COLORS</DIV><TABLE WIDTH="100%" 
ALIGN="center"><TR><TD><TABLE WIDTH="100%" CELLPADDING="5" 
STYLE="font-family:MS ゴシック;color:white;font-size:10pt">
<TR><TD BGCOLOR="#0000FF">0000FF</TD><TD BGCOLOR="#0033FF">0033FF</TD>
<TD BGCOLOR="#0066FF">0066FF</TD><TD BGCOLOR="#0099FF">0099FF</TD>
<TD BGCOLOR="#00CCFF">00CCFF</TD><TD BGCOLOR="#00FFFF">00FFFF</TD></TR>
<TR><TD BGCOLOR="#0000CC">0000CC</TD><TD BGCOLOR="#0033CC">0033CC</TD>
<TD BGCOLOR="#0066CC">0066CC</TD><TD BGCOLOR="#0099CC">0099CC</TD>
<TD BGCOLOR="#00CCCC">00CCCC</TD><TD BGCOLOR="#00FFCC">00FFCC</TD></TR>
<TR><TD BGCOLOR="#000099">000099</TD><TD BGCOLOR="#003399">003399</TD>
<TD BGCOLOR="#006699">006699</TD><TD BGCOLOR="#009999">009999</TD>
<TD BGCOLOR="#00CC99">00CC99</TD><TD BGCOLOR="#00FF99">00FF99</TD></TR>
<TR><TD BGCOLOR="#000066">000066</TD><TD BGCOLOR="#003366">003366</TD>
<TD BGCOLOR="#006666">006666</TD><TD BGCOLOR="#009966">009966</TD>
<TD BGCOLOR="#00CC66">00CC66</TD><TD BGCOLOR="#00FF66">00FF66</TD></TR>
<TR><TD BGCOLOR="#000033">000033</TD><TD BGCOLOR="#003333">003333</TD>
<TD BGCOLOR="#006633">006633</TD><TD BGCOLOR="#009933">009933</TD>
<TD BGCOLOR="#00CC33">00CC33</TD><TD BGCOLOR="#00FF33">00FF33</TD></TR>
<TR><TD BGCOLOR="#000000">000000</TD><TD BGCOLOR="#003300">003300</TD>
<TD BGCOLOR="#006600">006600</TD><TD BGCOLOR="#009900">009900</TD>
<TD BGCOLOR="#00CC00">00CC00</TD><TD BGCOLOR="#00FF00">00FF00</TD></TR>
<TR><TD BGCOLOR="#3300FF">3300FF</TD><TD BGCOLOR="#3333FF">3333FF</TD>
<TD BGCOLOR="#3366FF">3366FF</TD><TD BGCOLOR="#3399FF">3399FF</TD>
<TD BGCOLOR="#33CCFF">33CCFF</TD><TD BGCOLOR="#33FFFF">33FFFF</TD></TR>
<TR><TD BGCOLOR="#3300CC">3300CC</TD><TD BGCOLOR="#3333CC">3333CC</TD>
<TD BGCOLOR="#3366CC">3366CC</TD><TD BGCOLOR="#3399CC">3399CC</TD>
<TD BGCOLOR="#33CCCC">33CCCC</TD><TD BGCOLOR="#33FFCC">33FFCC</TD></TR>
<TR><TD BGCOLOR="#330099">330099</TD><TD BGCOLOR="#333399">333399</TD>
<TD BGCOLOR="#336699">336699</TD><TD BGCOLOR="#339999">339999</TD>
<TD BGCOLOR="#33CC99">33CC99</TD><TD BGCOLOR="#33FF99">33FF99</TD></TR>
<TR><TD BGCOLOR="#330066">330066</TD><TD BGCOLOR="#333366">333366</TD>
<TD BGCOLOR="#336666">336666</TD><TD BGCOLOR="#339966">339966</TD>
<TD BGCOLOR="#33CC66">33CC66</TD><TD BGCOLOR="#33FF66">33FF66</TD></TR>
<TR><TD BGCOLOR="#330033">330033</TD><TD BGCOLOR="#333333">333333</TD>
<TD BGCOLOR="#336633">336633</TD><TD BGCOLOR="#339933">339933</TD>
<TD BGCOLOR="#33CC33">33CC33</TD><TD BGCOLOR="#33FF33">33FF33</TD></TR>
<TR><TD BGCOLOR="#330000">330000</TD><TD BGCOLOR="#333300">333300</TD>
<TD BGCOLOR="#336600">336600</TD><TD BGCOLOR="#339900">339900</TD>
<TD BGCOLOR="#33CC00">33CC00</TD><TD BGCOLOR="#33FF00">33FF00</TD></TR>
<TR><TD BGCOLOR="#6600FF">6600FF</TD><TD BGCOLOR="#6633FF">6633FF</TD>
<TD BGCOLOR="#6666FF">6666FF</TD><TD BGCOLOR="#6699FF">6699FF</TD>
<TD BGCOLOR="#66CCFF">66CCFF</TD><TD BGCOLOR="#66FFFF">66FFFF</TD></TR>
<TR><TD BGCOLOR="#6600CC">6600CC</TD><TD BGCOLOR="#6633CC">6633CC</TD>
<TD BGCOLOR="#6666CC">6666CC</TD><TD BGCOLOR="#6699CC">6699CC</TD>
<TD BGCOLOR="#66CCCC">66CCCC</TD><TD BGCOLOR="#66FFCC">66FFCC</TD></TR>
<TR><TD BGCOLOR="#660099">660099</TD><TD BGCOLOR="#663399">663399</TD>
<TD BGCOLOR="#666699">666699</TD><TD BGCOLOR="#669999">669999</TD>
<TD BGCOLOR="#66CC99">66CC99</TD><TD BGCOLOR="#66FF99">66FF99</TD></TR>
<TR><TD BGCOLOR="#660066">660066</TD><TD BGCOLOR="#663366">663366</TD>
<TD BGCOLOR="#666666">666666</TD><TD BGCOLOR="#669966">669966</TD>
<TD BGCOLOR="#66CC66">66CC66</TD><TD BGCOLOR="#66FF66">66FF66</TD></TR>
<TR><TD BGCOLOR="#660033">660033</TD><TD BGCOLOR="#663333">663333</TD>
<TD BGCOLOR="#666633">666633</TD><TD BGCOLOR="#669933">669933</TD>
<TD BGCOLOR="#66CC33">66CC33</TD><TD BGCOLOR="#66FF33">66FF33</TD></TR>
<TR><TD BGCOLOR="#660000">660000</TD><TD BGCOLOR="#663300">663300</TD>
<TD BGCOLOR="#666600">666600</TD><TD BGCOLOR="#669900">669900</TD>
<TD BGCOLOR="#66CC00">66CC00</TD><TD BGCOLOR="#66FF00">66FF00</TD></TR>
</TABLE></TD><TD><TABLE WIDTH="100%" CELLPADDING="5" 
STYLE="font-family:MS ゴシック;font-size:10pt">
<TR><TD BGCOLOR="#9900FF">9900FF</TD><TD BGCOLOR="#9933FF">9933FF</TD>
<TD BGCOLOR="#9966FF">9966FF</TD><TD BGCOLOR="#9999FF">9999FF</TD>
<TD BGCOLOR="#99CCFF">99CCFF</TD><TD BGCOLOR="#99FFFF">99FFFF</TD></TR>
<TR><TD BGCOLOR="#9900CC">9900CC</TD><TD BGCOLOR="#9933CC">9933CC</TD>
<TD BGCOLOR="#9966CC">9966CC</TD><TD BGCOLOR="#9999CC">9999CC</TD>
<TD BGCOLOR="#99CCCC">99CCCC</TD><TD BGCOLOR="#99FFCC">99FFCC</TD></TR>
<TR><TD BGCOLOR="#990099">990099</TD><TD BGCOLOR="#993399">993399</TD>
<TD BGCOLOR="#996699">996699</TD><TD BGCOLOR="#999999">999999</TD>
<TD BGCOLOR="#99CC99">99CC99</TD><TD BGCOLOR="#99FF99">99FF99</TD></TR>
<TR><TD BGCOLOR="#990066">990066</TD><TD BGCOLOR="#993366">993366</TD>
<TD BGCOLOR="#996666">996666</TD><TD BGCOLOR="#999966">999966</TD>
<TD BGCOLOR="#99CC66">99CC66</TD><TD BGCOLOR="#99FF66">99FF66</TD></TR>
<TR><TD BGCOLOR="#990033">990033</TD><TD BGCOLOR="#993333">993333</TD>
<TD BGCOLOR="#996633">996633</TD><TD BGCOLOR="#999933">999933</TD>
<TD BGCOLOR="#99CC33">99CC33</TD><TD BGCOLOR="#99FF33">99FF33</TD></TR>
<TR><TD BGCOLOR="#990000">990000</TD><TD BGCOLOR="#993300">993300</TD>
<TD BGCOLOR="#996600">996600</TD><TD BGCOLOR="#999900">999900</TD>
<TD BGCOLOR="#99CC00">99CC00</TD><TD BGCOLOR="#99FF00">99FF00</TD></TR>
<TR><TD BGCOLOR="#CC00FF">CC00FF</TD><TD BGCOLOR="#CC33FF">CC33FF</TD>
<TD BGCOLOR="#CC66FF">CC66FF</TD><TD BGCOLOR="#CC99FF">CC99FF</TD>
<TD BGCOLOR="#CCCCFF">CCCCFF</TD><TD BGCOLOR="#CCFFFF">CCFFFF</TD></TR>
<TR><TD BGCOLOR="#CC00CC">CC00CC</TD><TD BGCOLOR="#CC33CC">CC33CC</TD>
<TD BGCOLOR="#CC66CC">CC66CC</TD><TD BGCOLOR="#CC99CC">CC99CC</TD>
<TD BGCOLOR="#CCCCCC">CCCCCC</TD><TD BGCOLOR="#CCFFCC">CCFFCC</TD></TR>
<TR><TD BGCOLOR="#CC0099">CC0099</TD><TD BGCOLOR="#CC3399">CC3399</TD>
<TD BGCOLOR="#CC6699">CC6699</TD><TD BGCOLOR="#CC9999">CC9999</TD>
<TD BGCOLOR="#CCCC99">CCCC99</TD><TD BGCOLOR="#CCFF99">CCFF99</TD></TR>
<TR><TD BGCOLOR="#CC0066">CC0066</TD><TD BGCOLOR="#CC3366">CC3366</TD>
<TD BGCOLOR="#CC6666">CC6666</TD><TD BGCOLOR="#CC9966">CC9966</TD>
<TD BGCOLOR="#CCCC66">CCCC66</TD><TD BGCOLOR="#CCFF66">CCFF66</TD></TR>
<TR><TD BGCOLOR="#CC0033">CC0033</TD><TD BGCOLOR="#CC3333">CC3333</TD>
<TD BGCOLOR="#CC6633">CC6633</TD><TD BGCOLOR="#CC9933">CC9933</TD>
<TD BGCOLOR="#CCCC33">CCCC33</TD><TD BGCOLOR="#CCFF33">CCFF33</TD></TR>
<TR><TD BGCOLOR="#CC0000">CC0000</TD><TD BGCOLOR="#CC3300">CC3300</TD>
<TD BGCOLOR="#CC6600">CC6600</TD><TD BGCOLOR="#CC9900">CC9900</TD>
<TD BGCOLOR="#CCCC00">CCCC00</TD><TD BGCOLOR="#CCFF00">CCFF00</TD></TR>
<TR><TD BGCOLOR="#FF00FF">FF00FF</TD><TD BGCOLOR="#FF33FF">FF33FF</TD>
<TD BGCOLOR="#FF66FF">FF66FF</TD><TD BGCOLOR="#FF99FF">FF99FF</TD>
<TD BGCOLOR="#FFCCFF">FFCCFF</TD><TD BGCOLOR="#FFFFFF">FFFFFF</TD></TR>
<TR><TD BGCOLOR="#FF00CC">FF00CC</TD><TD BGCOLOR="#FF33CC">FF33CC</TD>
<TD BGCOLOR="#FF66CC">FF66CC</TD><TD BGCOLOR="#FF99CC">FF99CC</TD>
<TD BGCOLOR="#FFCCCC">FFCCCC</TD><TD BGCOLOR="#FFFFCC">FFFFCC</TD></TR>
<TR><TD BGCOLOR="#FF0099">FF0099</TD><TD BGCOLOR="#FF3399">FF3399</TD>
<TD BGCOLOR="#FF6699">FF6699</TD><TD BGCOLOR="#FF9999">FF9999</TD>
<TD BGCOLOR="#FFCC99">FFCC99</TD><TD BGCOLOR="#FFFF99">FFFF99</TD></TR>
<TR><TD BGCOLOR="#FF0066">FF0066</TD><TD BGCOLOR="#FF3366">FF3366</TD>
<TD BGCOLOR="#FF6666">FF6666</TD><TD BGCOLOR="#FF9966">FF9966</TD>
<TD BGCOLOR="#FFCC66">FFCC66</TD><TD BGCOLOR="#FFFF66">FF6666</TD></TR>
<TR><TD BGCOLOR="#FF0033">FF0033</TD><TD BGCOLOR="#FF3333">FF3333</TD>
<TD BGCOLOR="#FF6633">FF6633</TD><TD BGCOLOR="#FF9933">FF9933</TD>
<TD BGCOLOR="#FFCC33">FFCC33</TD><TD BGCOLOR="#FFFF33">FFFF33</TD></TR>
<TR><TD BGCOLOR="#FF0000">FF0000</TD><TD BGCOLOR="#FF3300">FF3300</TD>
<TD BGCOLOR="#FF6600">FF6600</TD><TD BGCOLOR="#FF9900">FF9900</TD>
<TD BGCOLOR="#FFCC00">FFCC00</TD><TD BGCOLOR="#FFFF00">FFFF00</TD></TR>
</TABLE></TD></TR></TABLE></BODY></HTML>