 |
|
|
||||||
配色テストページ
番号のボタンをクリックすると背景と文字の色が変わります。
| 背景 | ||||||||||||||||||||||
| 文字 | ||||||||||||||||||||||
|
黒色配色で文字が黄色とか赤とかは、いかにも怪しげな印象をもたれますし、原色の組み合わせは、確かに目立つけれども・・ ということで、このサンプルは、背景は中間色（それでも充分派手だと思いますが）と文字色はできるだけはっきりした色の組み合わせで作ってみました。 |
| ソースです 面倒な方は、ここ（右クリックで対象をファイルに保存）のファイルダウンロード！ |
| <center> <table width="590"> <tbody> <tr> <td align="center"><b>配色テストページ</b></td> </tr> <tr> <td align="center"><font size="2">番号のボタンをクリックすると背景と文字の色が変わります。</font></td> </tr> </tbody> </table> </center> <center> <table cellspacing="0" cellpadding="0" border="1" bgcolor="#ffffff"> <TBODY> <tr> <td rowspan="2"><font color="#000000">背景</font></td> <td align="center" width="25"><INPUT type="button" value="白" onClick="document.bgColor='#ffffff'"></td> <td align="center" width="25"><INPUT type="button" value=" 1" onClick="document.bgColor='#ffffcc'"></td> <td align="center" width="25"><INPUT type="button" value=" 2" onClick="document.bgColor='#ffff66'"></td> <td align="center" width="25"><INPUT type="button" value=" 3" onClick="document.bgColor='#ccffff'"></td> <td align="center" width="25"><INPUT type="button" value=" 4" onClick="document.bgColor='#ccffcc'"></td> <td align="center" width="25"><INPUT type="button" value=" 5" onClick="document.bgColor='#99ff66'"></td> <td align="center" width="25"><INPUT type="button" value=" 6" onClick="document.bgColor='#66ff99'"></td> <td align="center" width="25"><INPUT type="button" value=" 7" onClick="document.bgColor='#ffccff'"></td> <td align="center" width="25"><INPUT type="button" value=" 8" onClick="document.bgColor='#ffcc99'"></td> <td align="center" width="25"><INPUT type="button" value=" 9" onClick="document.bgColor='#cccccc'"></td> <td align="center" width="25"><INPUT type="button" value="10" onClick="document.bgColor='#00cc00'"></td> <td align="center" width="25"><INPUT type="button" value="11" onClick="document.bgColor='#ff6666'"></td> <td align="center" width="25"><INPUT type="button" value="12" onClick="document.bgColor='#cc0000'"></td> <td align="center" width="25"><INPUT type="button" value="13" onClick="document.bgColor='#660000'"></td> <td align="center" width="25"><INPUT type="button" value="14" onClick="document.bgColor='#333399'"></td> <td align="center" width="25"><INPUT type="button" value="15" onClick="document.bgColor='#006600'"></td> <td align="center" width="25"><INPUT type="button" value="16" onClick="document.bgColor='#0099ff'"></td> <td align="center" width="25"><INPUT type="button" value="17" onClick="document.bgColor='#ff99ff'"></td> <td align="center" width="25"><INPUT type="button" value="18" onClick="document.bgColor='#cc6600'"></td> <td align="center" width="25"><INPUT type="button" value="19" onClick="document.bgColor='#993366'"></td> <td align="center" width="25"><INPUT type="button" value="20" onClick="document.bgColor='#003366'"></td> <td align="center" width="25"><INPUT type="button" value="黒" onClick="document.bgColor='#000000'"></td> </tr> <TR bgColor=#ffffff> <td><br> <br> </td> <td bgcolor="#ffffcc"></td> <td bgcolor="#ffff66"></td> <td bgcolor="#ccffff"></td> <td bgcolor="#ccffcc"></td> <td bgcolor="#99ff66"></td> <td bgcolor="#66ff99"></td> <td bgcolor="#ffccff"></td> <td bgcolor="#ffcc99"></td> <td bgcolor="#cccccc" ></td> <td bgcolor="#00cc00" ></td> <td bgcolor="#ff6666" ></td> <td bgcolor="#cc0000" ></td> <td bgcolor="#660000" ></td> <td bgcolor="#333399" ></td> <td bgcolor="#006600" ></td> <td bgcolor="#0099ff" ></td> <td bgcolor="#ff99ff" ></td> <td bgcolor="#cc6600" ></td> <td width="25" bgcolor="#993366"></td> <td bgcolor="#003366" ></td> <td bgcolor="#000000"></td> </TR> <tr> <td rowspan="2"><font color="#000000">文字</font></td> <td align="center" width="25"><INPUT type="button" value="黒" onClick="document.fgColor='#000000'"></td> <td align="center" width="25"><INPUT type="button" value=" 1" onClick="document.fgColor='#660000'"></td> <td align="center" width="25"><INPUT type="button" value=" 2" onClick="document.fgColor='#330066'"></td> <td align="center" width="25"><INPUT type="button" value=" 3" onClick="document.fgColor='#006600'"></td> <td align="center" width="25"><INPUT type="button" value=" 4" onClick="document.fgColor='#336699'"></td> <td align="center" width="25"><INPUT type="button" value=" 5" onClick="document.fgColor='#ff0000'"></td> <td align="center" width="25"><INPUT type="button" value=" 6" onClick="document.fgColor='#990000'"></td> <td align="center" width="25"><INPUT type="button" value=" 7" onClick="document.fgColor='#0066ff'"></td> <td align="center" width="25"><INPUT type="button" value=" 8" onClick="document.fgColor='#ff0099'"></td> <td align="center" width="25"><INPUT type="button" value=" 9" onClick="document.fgColor='#99ffff'"></td> <td align="center" width="25"><INPUT type="button" value="10" onClick="document.fgColor='#ffff00'"></td> <td align="center" width="25"><INPUT type="button" value="11" onClick="document.fgColor='#ffccff'"></td> <td align="center" width="25"><INPUT type="button" value="12" onClick="document.fgColor='#ffcc00'"></td> <td align="center" width="25"><INPUT type="button" value="13" onClick="document.fgColor='#00cc00'"></td> <td align="center" width="25"><INPUT type="button" value="14" onClick="document.fgColor='#cc9900'"></td> <td align="center" width="25"><INPUT type="button" value="15" onClick="document.fgColor='#ff9900'"></td> <td align="center" width="25"><INPUT type="button" value="16" onClick="document.fgColor='#00ffff'"></td> <td align="center" width="25"><INPUT type="button" value="17" onClick="document.fgColor='#cc3300'"></td> <td align="center" width="25"><INPUT type="button" value="18" onClick="document.fgColor='#ffffcc'"></td> <td align="center" width="25"><INPUT type="button" value="19" onClick="document.fgColor='#666600'"></td> <td align="center" width="25"><INPUT type="button" value="20" onClick="document.fgColor='#996600'"></td> <td align="center" width="25"><INPUT type="button" value="白" onClick="document.fgColor='#ffffff'"></td> </tr> <TR bgColor=#ffffff> <td bgcolor="#000000"><br> <br> </td> <td bgcolor="#660000"></td> <td bgcolor="#330066" ></td> <td bgcolor="#006600"></td> <td bgcolor="#336699" ></td> <td bgcolor="#ff0000"></td> <td bgcolor="#990000"></td> <td bgcolor="#0066ff" ></td> <td bgcolor="#ff0099"></td> <td bgcolor="#99ffff" ></td> <td bgcolor="#ffff00"></td> <td bgcolor="#ffccff"></td> <td bgcolor="#ffcc00"></td> <td bgcolor="#00cc00"></td> <td bgcolor="#cc9900"></td> <td bgcolor="#ff9900"></td> <td bgcolor="#00ffff" ></td> <td bgcolor="#cc3300"></td> <td bgcolor="#ffffcc"></td> <td bgcolor="#666600" ></td> <td bgcolor="#996600"></td> <td></td> </TR> </TBODY> </table> </center> |