透過画像を利用して色替え簡単な縁取りを作ってみる
例えば下のような2つの画像を用意します。
 |
 |
| sample04.gif | sample05.gif |
わかりやすいように背景に色を入れていますが白い正方形（このページの背景色）に丸く真ん中を透過させて2分割したものです。これを下のようにのテーブルの両端に配置してみます。
|
HOME│ | Diary│ | Profile│ | Link│ | |
【ソース】
<table cellspacing="0" cellpadding="0" bgcolor="#CCCC99" border="0">
<tr>
<td>
<img src="img/sample04.gif" width="9" height="18"></td><td>│<a href="#">HOME</a>│<a href="#">Diary</a>│<a href="#">Profile</a>│<a href="#">Link</a> | <a href="#">Mail</a> |
</td>
<td>
<img src="img/sample05.gif" width="9" height="18">
</td>
</tr>
</table>
形を見せたい部分を透過して外側を背景色に合わせているのでテーブルの色指定を変更するだけで色替えできるのでお手軽です。
|
HOME│ | Diary│ | Profile│ | Link│ | |
↑同じソースで bgcolor を変えただけです。
次は同じように正方形の真ん中を丸く透過したものを4分割した画像を用意。
 |
 |
 |
 |
これをテーブルの四隅に配置すれば角Ｒの囲みができます。
|
|
|
| ---テキストスペース--- | ||
|
|
【ソース】
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFCC66">
<tr>
<td valign="top"><img src="../img/tips/sample06.gif" alt="" width="15" height="15"></td>
<td> </td> ←この空白は上部センター部分です
<td valign="top"><img src="../img/tips/sample07.gif" alt="" width="15" height="15"></td>
</tr>
<tr>
<td> </td> ←この空白は左センター部分です
<td>---テキストスペース---</td>
<td> </td> ←この空白は右センター部分です
</tr>
<tr>
<td valign="bottom"><img src="../img/tips/sample08.gif" alt="" width="15" height="15"></td>
<td> </td> ←この空白は下センター部分です
<td valign="bottom"><img src="../img/tips/sample09.gif" alt="" width="15" height="15"></td>
</tr>
</table>
角に画像を配置するときのポイントは、背景色が漏れるのを防ぐために画像を配置したセルの valign を外側に合わせることです。
↓下のテーブルは同じ画像を使って背景色を変えただけです。
|
|
|
| ---テキストスペース--- | ||
|
|
|
|
|
| ---テキストスペース--- | ||
|
|
この例では丸い形を使いましたが、画像の形を工夫すればいろんなバリエーションが作れますね。
