３-２

　カッコ良く画像をセット
　　　もっと、画像が引き立つ方法はないか。

『答え』　ありますとも。　良い作品には額縁 がお似合いです。

こんな額縁に画像を入れては如何ですか。どうです？　立体感あるでしょ。

このHTMLは、下記のように書きます。
（＊問題ない見本として、敢えて大文字小文字を混ぜてます。）

<table border=8><TD>
<TABLE BORDER=1><TD>
<TABLE BORDER=2><td>
<img src="abc.gif"><br>
</td></TABLE>
</TD></TABLE>
</td></table>

マル暗記でも構いませんが、ちょっと多いので解説しましょう。
実は表組みを応用してるんですよ。 下記を入力してみて下さい。

<table border=1><TD>
<img src="abc.gif"><br>
</td></TABLE>

保存してブラウザで見て下さい。単純な枠だけ付きましたね。上のようにTABLEを入れ子 にして繰り返せば、立派な額縁に化けると言う仕掛けでした。BORDER= の数値が枠の太さです。
ご理解戴けましたか。　以上が理解できたら、この項は修了です。
さてさて、超初心者中間制作として次のHTMLを入力しましょう。
３つほど、習ってない言葉を使いました。消してみたりして自習してみようネ。
 自分でもアイデアを加えて、良いもの出来たら送って下さいネ。

<HTML><BODY bgcolor="#ccffcc"><CENTER>
ようこそ、いらっしゃいませ<br>
<table border=4><TD><TABLE BORDER=1><TD>
<FONT SIZE=6><FONT COLOR="#cc0000">
○○○’s　ＨＯＭＥ ＰＡＧＥ
</FONT></FONT></td></TABLE></TD></TABLE>
<br><FONT COLOR="#0000ff">
<i>私の部屋の窓からの眺めをプレゼント！</i>
</font><br>
<table border=8><TD><TABLE BORDER=1><TD><TABLE BORDER=2><td>
<img src="abc.gif"><br>
</td></TABLE></TD></TABLE></td></table>
<br>
<font size=3><font color="#000000">
初めてのホームページ制作にチャレンジ中です。
<br></font></font>
</CENTER></BODY></HTML>

●アドバイス●
尚、上記のサンプルをよく見ると画像と額縁の間（画像の下部分）に僅かな隙間が見えます。これが気になる方は、 テーブルタグのところの改行を全部外して下さい（テーブルタグが全部１行になる感じです）。見えない改行タグの積み重ねみたいなもんで隙間が空きますので。
☆彡main point
　一般的な表の書き方を応用すれば、こんな額縁が出来る訳です。
　やはり、これも<／TABLE> で締めるという対になります。
　別に画像に限りませんので、タイトル文字などにもお使い下さい。
　●ポイント１●　<TABLE BORDER>の言葉を記憶しよう。
　●ポイント２●　この額縁装飾は文字にも使える。
　●ポイント３●　太さでメリハリを出す。
質問メール　 ＯＺ道場メニュー