3-2

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

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

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

この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を入力しましょう。
3つほど、習ってない言葉を使いました。消してみたりして自習してみようネ。
自分でもアイデアを加えて、良いもの出来たら送って下さいネ。

<HTML><BODY bgcolor="#ccffcc"><CENTER>
ようこそ、いらっしゃいませ<br>
<table border=4><TD><TABLE BORDER=1><TD>
<FONT SIZE=6><FONT COLOR="#cc0000">
○○○’s HOME PAGE
</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>

●アドバイス●
尚、上記のサンプルをよく見ると画像と額縁の間(画像の下部分)に僅かな隙間が見えます。これが気になる方は、 テーブルタグのところの改行を全部外して下さい(テーブルタグが全部1行になる感じです)。見えない改行タグの積み重ねみたいなもんで隙間が空きますので。

☆彡main point
一般的な表の書き方を応用すれば、こんな額縁が出来る訳です。
やはり、これも</TABLE> で締めるという対になります。
別に画像に限りませんので、タイトル文字などにもお使い下さい。

●ポイント1● <TABLE BORDER>の言葉を記憶しよう。
●ポイント2● この額縁装飾は文字にも使える。
●ポイント3● 太さでメリハリを出す。


     . . .   . . .