3/4 角の丸い枠を作る [ホームページ作成] All About

TABLE要素などのHTMLソースを書く

では、画像を組み合わせるHTMLソースを書きましょう。

書く内容は次のようになります。

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR><TD><IMG SRC="lefttop.gif" WIDTH="20" HEIGHT="20" ALT=""></TD>
<TD BGCOLOR="#0000ff"><IMG SRC="lefttop.gif" WIDTH="1" HEIGHT="1"></TD>
<TD><IMG SRC="righttop.gif" WIDTH="20" HEIGHT="20" ALT=""></TD></TR>
<TR><TD BGCOLOR="#0000ff"><IMG SRC="lefttop.gif" WIDTH="1" HEIGHT="1"></TD>
<TD BGCOLOR="#0000ff">
<FONT COLOR="#ffffff"><B>★角の丸い枠を作ろう！★</B></FONT>
</TD>
<TD BGCOLOR="#0000ff"><IMG SRC="lefttop.gif" WIDTH="1" HEIGHT="1"></TD></TR>
<TR><TD><IMG SRC="leftbottom.gif" WIDTH="20" HEIGHT="20" ALT=""></TD>
<TD BGCOLOR="#0000ff"><IMG SRC="lefttop.gif" WIDTH="1" HEIGHT="1"></TD>
<TD><IMG SRC="rightbottom.gif" WIDTH="20" HEIGHT="20" ALT=""></TD></TR>
</TABLE>

◆黒色の部分は、そのままコピーして頂ければ問題ありません。
◆赤色の部分は、四隅の画像ファイル名とサイズです。もし、サイズが20×20ではない場合は、書き換えて下さい。画像ファイル名も、lefttop.gif（左上）、righttop.gif（右上）、leftbottom.gif（左下）、rightbottom.gif（右下）とは異なる場合は、それぞれ書き換えて下さい。
◆紫色の部分は、枠の色です。上記の例では「#0000ff」なので「青色」になっています。ここは、四隅の画像で使った色に合わせる必要があります。
◆緑色の部分は、枠の中に表示される文字の色です。上記の例では「#ffffff」なので「白色」になっています。
◆水色の部分は、枠の中に表示される文字です。お好きなように書き換えて下さい。

◆青紫色の部分を見て疑問に思われるかも知れませんね。４カ所で、「左上」用の画像を表示させているように見えます。しかし、実際は、サイズを1×1に指定しているため、見えません。これは、ダミーとして挿入してあるだけです。 Netscape Navigatorでは、セル（マス目）の中に何も存在しない場合、背景色を描画してくれません。それでは「枠」になりませんので、対策として、ダミーの画像（何でも構わないのですが、ここでは「左上」用の画像を使いました）を、最小サイズで表示させています。
※良く分からなくても大丈夫です。ダミーの部分は何でも構わないので、良く分からない場合は、上記のソースをそのままコピーされればＯＫです。

上記のソースをHTMLファイルに貼り付けると、下記のように表示されます。