カラーバーチャートの作り方

HTML のテーブルでカラーバーチャートを作る　（V10)

　カラーバーやグレースケールのような図形はグラフィックソフトで作成するのが一般的ですが、ここでは HTML のテーブルを使用してみました。HTML のテーブルはピクセル単位で均等にレイアウトするのに最適でスピーディに仕上げることができます。
　色設定は 16進 RGB が使用できますが、これはイメージとしてピンときません。やはり 10進 RGB (0～255) の方が良いですね。こちらの ZSPC Super Color Chart で、10進 RGB から 16進 RGB の変換ができます。
　完成したカラーバーのテーブルは、その表示画面をキャプチャーして使用します。

作例見本　カラーバー＋グレースケール　PCスケール 0～255

HTML ソース

　下記テキストをメモ帳や SimpleText などで作成しWeb ブラウザで表示する。

<HTML>
<TABLE width="720" border="0" cellspacing="0" cellpadding="0" height="480">
<TR height="211">
<TD bgcolor="#c0c0c0" width="103" height="214"></TD>
<TD bgcolor="#c0c000" width="103" height="214"></TD>
<TD bgcolor="#00c0c0" width="103" height="214"></TD>
<TD bgcolor="#00c000" width="103" height="214"></TD>
<TD bgcolor="#c000c0" width="103" height="214"></TD>
<TD bgcolor="#c00000" width="103" height="214"></TD>
<TD bgcolor="#0000c0" width="102" height="214"></TD>
</TR>
<TR height="24">
<TD bgcolor="#1010b5" width="103" height="24"></TD>
<TD bgcolor="#000000" width="103" height="24"></TD>
<TD bgcolor="#c000c0" width="103" height="24"></TD>
<TD bgcolor="#000000" width="103" height="24"></TD>
<TD bgcolor="#00c0c0" width="103" height="24"></TD>
<TD bgcolor="#000000" width="103" height="24"></TD>
<TD bgcolor="#c0c0c0" width="102" height="24"></TD>
</TR>
<TR height="49">
<TD bgcolor="#000000" width="103" height="49"></TD>
<TD bgcolor="#ffffff" width="103" height="49"></TD>
<TD bgcolor="#000000" width="103" height="49"></TD>
<TD bgcolor="#000000" width="103" height="49"></TD>
<TD bgcolor="#000000" width="103" height="49"></TD>
<TD bgcolor="#000000" width="103" height="49">
<TABLE width="103" border="0" cellspacing="0" cellpadding="0">
<TR height="16">
<TD width="51" height="16"></TD>
<TD bgcolor="#080808" width="52" height="16"></TD>
</TR>
<TR height="17">
<TD colspan="2" bgcolor="#101010" width="103" height="17"></TD>
</TR>
<TR height="16">
<TD width="51" height="16"></TD>
<TD bgcolor="#080808" width="52" height="16"></TD>
</TR>
</TABLE>
</TD>
<TD bgcolor="#000000" width="102" height="49"></TD>
</TR>
<TR height="196">
<TD colspan="7" align="center" bgcolor="#808080" width="720" height="196">
<TABLE width="627" border="0" cellspacing="0" cellpadding="0" height="98">
<TR>
<TD bgcolor="#000000" width="19"></TD>
<TD bgcolor="#080808" width="19"></TD>
<TD bgcolor="#101010" width="19"></TD>
<TD bgcolor="#181818" width="19"></TD>
<TD bgcolor="#202020" width="19"></TD>
<TD bgcolor="#282828" width="19"></TD>
<TD bgcolor="#303030" width="19"></TD>
<TD bgcolor="#383838" width="19"></TD>
<TD bgcolor="#404040" width="19"></TD>
<TD bgcolor="#484848" width="19"></TD>
<TD bgcolor="#505050" width="19"></TD>
<TD bgcolor="#585858" width="19"></TD>
<TD bgcolor="#606060" width="19"></TD>
<TD bgcolor="#686868" width="19"></TD>
<TD bgcolor="#707070" width="19"></TD>
<TD bgcolor="#787878" width="19"></TD>
<TD bgcolor="#808080" width="19"></TD>
<TD bgcolor="#888888" width="19"></TD>
<TD bgcolor="#909090" width="19"></TD>
<TD bgcolor="#989898" width="19"></TD>
<TD bgcolor="#a0a0a0" width="19"></TD>
<TD bgcolor="#a8a8a8" width="19"></TD>
<TD bgcolor="#b0b0b0" width="19"></TD>
<TD bgcolor="#b8b8b8" width="19"></TD>
<TD bgcolor="#c0c0c0" width="19"></TD>
<TD bgcolor="#c8c8c8" width="19"></TD>
<TD bgcolor="#d0d0d0" width="19"></TD>
<TD bgcolor="#d8d8d8" width="19"></TD>
<TD bgcolor="#e0e0e0" width="19"></TD>
<TD bgcolor="#e8e8e8" width="19"></TD>
<TD bgcolor="#f0f0f0" width="19"></TD>
<TD bgcolor="#f8f8f8" width="19"></TD>
<TD bgcolor="#ffffff" width="19"></TD>
</TR>
</TABLE>
<TABLE width="627" border="0" cellspacing="0" cellpadding="0" height="98">
<TR>
<TD bgcolor="#ffffff" width="19"></TD>
<TD bgcolor="#f8f8f8" width="19"></TD>
<TD bgcolor="#f0f0f0" width="19"></TD>
<TD bgcolor="#e8e8e8" width="19"></TD>
<TD bgcolor="#e0e0e0" width="19"></TD>
<TD bgcolor="#d8d8d8" width="19"></TD>
<TD bgcolor="#d0d0d0" width="19"></TD>
<TD bgcolor="#c8c8c8" width="19"></TD>
<TD bgcolor="#c0c0c0" width="19"></TD>
<TD bgcolor="#b8b8b8" width="19"></TD>
<TD bgcolor="#b0b0b0" width="19"></TD>
<TD bgcolor="#a8a8a8" width="19"></TD>
<TD bgcolor="#a0a0a0" width="19"></TD>
<TD bgcolor="#989898" width="19"></TD>
<TD bgcolor="#909090" width="19"></TD>
<TD bgcolor="#888888" width="19"></TD>
<TD bgcolor="#808080" width="19"></TD>
<TD bgcolor="#787878" width="19"></TD>
<TD bgcolor="#707070" width="19"></TD>
<TD bgcolor="#686868" width="19"></TD>
<TD bgcolor="#606060" width="19"></TD>
<TD bgcolor="#585858" width="19"></TD>
<TD bgcolor="#505050" width="19"></TD>
<TD bgcolor="#484848" width="19"></TD>
<TD bgcolor="#404040" width="19"></TD>
<TD bgcolor="#383838" width="19"></TD>
<TD bgcolor="#303030" width="19"></TD>
<TD bgcolor="#282828" width="19"></TD>
<TD bgcolor="#202020" width="19"></TD>
<TD bgcolor="#181818" width="19"></TD>
<TD bgcolor="#101010" width="19"></TD>
<TD bgcolor="#080808" width="19"></TD>
<TD bgcolor="#000000" width="19"></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</HTML>