1.角の丸いテブールで文章(画像)を囲もう
このように丸いテーブルの中に文章や画像があるページを見たことはありませんか?
f01af01bf01cf01df01ef01ff01gf01h
f01a.giff01b.giff01c.giff01d.giff01e.giff01f.giff01g.giff01h.gif

この8つの画像を使って、このようなフレームに見せています。画像の名称は私がかってに付けたものなので自由に付けてください。ここでは、上の名称で説明します。
実は、このように3x3のテーブルの中に文章や画像があるのです。テーブルの枠を消して、丸いテーブルに見せてあるのです。角の部分は画像をそのまま表示すれば良いですが、上下、左右の真中はテーブルの背景画像として表示します。それでテーブルの大きさが変わっても良いようにします。
使い方

8つの画像をフレームを使って左上(f01a.gif)、上(f01b.gif)、右上(f01c.gif)、左(f01d.gif)、右(f01e.gif)、左下(f01f.gif)、下(f01g.gif)、右下(f01h.gif)に配置します。
4つの角は通常の画像の配置、上下左右は各フレームのセルに背景画像として配置します。
画像がframeというフォルダにあるとすると、タグで書くと
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0">
<TR><TD><IMG SRC="frame/f01a.gif" WIDTH="画像の大きさ" HEIGHT="画像の大きさ"></TD><TD BACKGROUND="frame/f01b.gif"><IMG SRC="frame/space.gif" WIDTH="14" HEIGHT="14"></TD><TD><IMG SRC="frame/f01c.gif" WIDTH="画像の大きさ" HEIGHT="画像の大きさ"></TD></TR>
<TR><TD BACKGROUND="frame/f01d.gif"><IMG SRC="frame/space.gif" WIDTH="14" HEIGHT="14"></TD><TD>

ここに画像を配置するか、文章を書きます

</TD><TD BACKGROUND="frame/f01e.gif"><IMG SRC="frame/space.gif" WIDTH="14" HEIGHT="14"></TD></TR>
<TR><TD><IMG SRC="frame/f01f.gif" WIDTH="画像の大きさ" HEIGHT="画像の大きさ"></TD><TD BACKGROUND="frame/f01g.gif"><IMG SRC="frame/space.gif" WIDTH="14" HEIGHT="14"></TD><TD><IMG SRC="frame/f01h.gif" WIDTH="画像の大きさ" HEIGHT="画像の大きさ"></TD></TR>
</TABLE>
BORDER、CELLPADDING、CELLSPACING を各0で指定することで、テーブルの枠を消します。
上下左右のテーブルのセルには透明な画像 space.gif を配置します。これが無いとネットスケープではセルが無くなり、背景画像が表示されません。space.gif は下の枠の中にあります。透明画像なので何も無いように見えますが・・・。

space.gif

透明画像の大きさは、width、hight でフレームの画像より小さく指定します。


戻る