画像に関するタグ


画像を表示する ○ ○ ○ ○ #image

<IMG src="画像のURL" width="横幅" height="高さ" alt="表示するテキスト">
終了タグ:不要
画像を表示するためのタグです．横幅と縦幅は書かなくてもいいのですが，書いたほうがいいです．書いておくとその分のスペースをあらかじめ用意するので，読み込み中にデザインが崩れるという事がありません．横幅と縦幅が画像のサイズと一致してないとその分だけ縮小もしくは拡大されて表示されます．ALT属性は画像の読み込みに失敗したときに表示されます（これを代替テキストといいます）．どのような画像か分かるように必ず指定しておきましょう．


代替テキスト



【HTML】
<img src="gazou.png" width="100" height="70" alt="代替テキスト">（通常時）
<img src="gazou-x.png" alt="代替テキスト">（画像が無い場合）
<img src="gazou.png" width="200" height="30">（画像の幅と高さが一致していない場合）
BACK △
画像の周りに枠をつける ○ ○ △ ○ #border

<IMG src="URL" border="※">
終了タグ:不要
※の部分に枠の太さ（ピクセルのみ）を入れてください．指定しない場合この枠は表示されません．ただし，画像にリンクを張った際に，枠が表示されるブラウザがあります．リンクのときにも表示したくない場合は※に0を入れてください．








【HTML】
<img src="gazou.png" width="100" height="70">（通常時）
<img src="gazou.png" width="100" height="70" border="5">（5px指定時）
<a href="#"><img src="gazou.png" width="100" height="70"></a>（通常リンク時）
<a href="#"><img src="gazou.png" width="100" height="70" border="0"></a>（0px指定リンク時）
BACK △
画像の横にテキストを持ってくる ○ ○ ○ ○ #align

<IMG src="URL" align=" left｜right ">
終了タグ:不要
この後に記述した文が回り込み表示されます．LEFTと指定すれば，画像が左によるのでテキストは右側に表示されます．入りきらなかった場合は画像の下に表示されます．途中で回り込みを解除するには<BR clear="none｜all｜left｜right">を使います．noneはデフォルトで，そのまま改行です． CLEAR属性は推奨されていない．以下にCSSの例を示します．この色の部分を必要に応じて変更してください．
HEAD内に
<STYLE type="text/css">
BR.br { clear: left｜right｜both（allと同等） }
</STYLE>
本文に <IMG src="URL" align=" left｜right ">
・・・・・・・・・・・・
<BR class="br">
…
【HTML】
<img src="gazou.png" align="right">
【HTML】
<img src="gazou.png" align="left">
BACK △