4.■リンク付き画像
次は、リンク付き画像を表示したいときの記述法を説明します。
<html>
<head></head>
<title>ここにページのタイトルを入れます</title>
<body>
ここに内容を記述していきます。<br>
二行目を記述していきます。<br>
<a href="3.htm"><img src="1.gif"></a>
</body>
</html>
<head></head>
<title>ここにページのタイトルを入れます</title>
<body>
ここに内容を記述していきます。<br>
二行目を記述していきます。<br>
<a href="3.htm"><img src="1.gif"></a>
</body>
</html>
表示結果 <img src="画像ファイル名"> で、画像を配置できます。 <a href="移動するファイル名"></a>でかこむことで 画像をクリックすると移動するようになります。 でもこのままだと画像の周りにリンク用の変な枠が表示されてしまいます。 これを消すには、 <img src="画像ファイル名" border="0"> と指定します。 *画像ファイル名は半角英数小文字で! 表示結果
ステップアップ! 画像に名前を付ける
画像をそのまま配置しただけでは サーチエンジンや、画像非表示で閲覧している 人に、その画像の意味を伝える事ができません。 そこで、画像には全て名前を付けるようにします。
<img src="1.gif" alt="画像の名前">
alt="" で、その画像の名前を指定します。ステップアップ! 画像のサイズを指定する
画像は何も指定しないと、 元のサイズのままで表示されてしまいます。 もし、多きい画像を小さいサイズで表示したい場合、 <width=""> と、幅だけ指定すればOKです。
<img src="1.gif" alt="画像の名前" width="100px">
この時、元の画像の1/2、1/4のサイズを指定すると、
綺麗に縮小されます。
それ以外は、画像がギザギザになってしまう場合があります。
(つまり、画像は偶数サイズで作成!)
ステップアップ! 画像に文字を回り込ませる
<img src="1.gif" alt="画像の名前" align="left">
とすると、画像の右に文字が張り付きます。 とすると、画像の右に文字が張り付きます。 とすると、画像の右に文字が張り付きます。 とすると、画像の右に文字が張り付きます。 とすると、画像の右に文字が張り付きます。 とすると、画像の右に文字が張り付きます。
<br clear="left">
とすると、画像の右に文字が張り付きます。 とすると、画像の右に文字が張り付きます。 とすると、画像の右に文字が張り付きます。 とすると、画像の右に文字が張り付きます。 とすると、画像の右に文字が張り付きます。 とすると、画像の右に文字が張り付きます。
<br clear="left">
とすると、画像の右に文字が張り付きます。 <br clear="left">で回り込みを解除しないと、 後の表示が崩れる場合がありますので注意!
とすると、画像の右に文字が張り付きます。
とすると、画像の右に文字が張り付きます。
とすると、画像の右に文字が張り付きます。
とすると、画像の右に文字が張り付きます。
とすると、画像の右に文字が張り付きます。
とすると、画像の右に文字が張り付きます。

