凡人の部屋(bonjin.com)
悩めるウェブマスター Index
色の付いた枠のサンプル
  • 「bonjin.com」の中で、凡人はこれしか知らないのか？というほど多用している色の付いた枠のサンプルです。
00660099000094d37b33ff66009999

　　 原理はテーブル（表）を２重にしているだけです。外側のテーブルの表示したい枠の色を指定して、内側のテーブルの色を白(#ffffff)を指定します。
　内側のテーブルの幅は外側のテーブルの幅のマイナス２です。このように設定すると枠の線の太さが最小の１ドットになります。
　横方向の水平線は、この枠の色の場合は
　<hr color="#f5d7a7" size="1">です。color="#f5d7a7"のところにテーブルの外側と同じ色コードを指定します。
　「bonjin.com」では、VGA(640ドットX480ドット)の解像度でも横スクロールが発生しないように、外側のテーブルの横幅を590ドットに指定しています。



↑上の枠のソースコードが、↓下記になります。


<center>
<table cellspacing="1" cellpadding="0" width="590" bgcolor="#f5d7a7" border="0">
<tbody>
<tr>
<td>
<center>
<table cellspacing="0" cellpadding="2" width="588" border="0" bgcolor="#ffffff">
<tbody>
<tr>
<td>
<hr color="#f5d7a7" size="1">
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
</center>


↑上のソースコードの解説です。↓



外側のテーブルカラーが枠の色、ここでは「bgcolor="#f5d7a7"」
水平線<hr color="#f5d7a7" SIZE="1">は上の枠のテーブルと同じ色に
表の高さを指定する時は、「height="ドット数"」
内側のテーブルは、「height="外側のドット数マイナス２"」
内側のテーブルカラー背景色が白の場合は「bgColor=#ffffff」
内側のテーブルの「cellPadding=2」の数値は任意

表の高さは指定していしないで、表の中の文章、画像の分量に応じて自動で調整した方が面倒でないです。


↓ちょっと工夫するとこんなこともできます。↓





↑上の枠のソースコードが、↓下記になります。


<center>
<table cellspacing="1" cellpadding="0" width="590" bgcolor="#f5d7a7" border="0">
<tbody>
<tr>
<td height="25"></td>
</tr>
<tr>
<td>
<center>
<table cellspacing="0" cellpadding="2" width="588" border="0" bgcolor="#ffffff">
<tbody>
<tr>
<td><br>
<br>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
</center>


たぶんつっこみが入るでしょう

<table border="1" bordercolor="#f5d7a7" cellspacing="0" width="590">
<tr>
<td>
</td>
</tr></table>

　上記のタグで、内側のテーブルは必要ないではないでしょうか？というつっこみに対する解答です。
　Internet ExploreとNetscape（Mozilla系）では表示すると色表現が違いますので、見え方の印象がずいぶん変わります。

#006600　(safe)








#990000　(safe)








#84D37b　(no safe)








#33FF66　(safe)








#009999　(no safe)








#b56292








#ff99ff









#BDB76B








#afeeee









#0060f0