無料ではじめる!ホームページ入門〜ホームページ作成解説サイト〜 | HOME | HP | HTML | UP | other | Link | about |
HOME > HTML > HTML逆引きリファレンス > イメージ
|
イメージ画像を表示したい
<img src="○" alt="●">
<img>タグで指定します。src属性に画像ファイルのURLを、alt属性に画像の代わりに表示されるテキストを指定します。
<img src="../img/dog.gif" alt="犬">
結果 TOP 画像のサイズを指定したい
<img src="○" width="●" height="□">
width属性で画像ファイルの幅を、height属性で画像ファイルの高さを指定します。ピクセルか、ウィンドウに対するパーセントで指定します。
<img src="../img/dog.gif" width="41" height="56">
<img src="../img/dog.gif" width="70" height="30"> <img src="../img/dog.gif" width="20" height="10"> 結果 TOP 画像の枠線を表示したい
<img src="○" border="●">
通常画像の周りには枠線は引かれませんが、border属性により枠線を設定することができます。 HTMLソース
<img src="../img/dog.gif" border="2">
結果 TOP テキストとの並び方を指定したい
<img src="○" align="●">
align属性で画像とテキストの並べ方を指定することができます。指定しない場合はbottomの位置になります。
<img src="../img/dog.gif" width="41" height="56" align="top">
topに指定。<br> <img src="../img/dog.gif" width="41" height="56" align="middle"> middleに指定。<br> <img src="../img/dog.gif" width="41" height="56" align="bottom"> bottomに指定。 結果
topに指定。
middleに指定。 bottomに指定。 TOP 画像にテキストを回り込ませたい
<img src="○" align="●">
align属性で画像を片端に寄せ、画像の横に、テキストを複数行配置することができます。
<img src="../img/dog.gif" alt="犬" align="left">
<p>align属性で画像を片端に寄せ、画像の横に、テキストを複数行配置することができます。<br> left…画像を左に寄せ、テキストを右に回り込ませます。<br> right…画像を右に寄せ、テキストを左に回り込ませます。</p> <img src="../img/dog.gif" alt="犬" align="right"> <p>align属性で画像を片端に寄せ、画像の横に、テキストを複数行配置することができます。<br> left…画像を左に寄せ、テキストを右に回り込ませます。<br> right…画像を右に寄せ、テキストを左に回り込ませます。</p> 結果 align属性で画像を片端に寄せ、画像の横に、テキストを複数行配置することができます。 align属性で画像を片端に寄せ、画像の横に、テキストを複数行配置することができます。 TOP 画像に対する回り込みを解除したい
<br clear="○">
<br>タグのclear属性でテキストの回りこみを解除できます。以降のテキストは画像の下から続けられます。
<img src="../img/dog.gif" alt="犬" align="left">
<p><br>タグのclear属性でテキストの回りこみを解除できます。以降のテキストは画像の下から続けられます。<br clear="left"> left…画像が左側にあるときの回り込みを解除。<br> right…画像が右側にあるときの回り込みを解除。<br> all…どちらの場合も有効。<br></p> <img src="../img/dog.gif" alt="犬" align="left"> <p><br>タグのclear属性でテキストの回りこみを解除できます。以降のテキストは画像の下から続けられます。<br clear="right"> left…画像が左側にあるときの回り込みを解除。<br> right…画像が右側にあるときの回り込みを解除。<br> all…どちらの場合も有効。</p> 結果 <br>タグのclear属性でテキストの回りこみを解除できます。以降のテキストは画像の下から続けられます。 <br>タグのclear属性でテキストの回りこみを解除できます。以降のテキストは画像の下から続けられます。 TOP 画像とテキストの間隔を指定したい
<img src="○" vspace="●" hspace="□">
vspace属性で画像の上下に、hspace属性で画像の左右に余白を設けることができます。 HTMLソース
<img src="../img/dog.gif" align="left" vspace="10" hspace="10">
<p> align属性で画像を片端に寄せ、画像の横に、テキストを複数行配置することができます。<br> left…画像を左に寄せ、テキストを右に回り込ませます。<br> right…画像を右に寄せ、テキストを左に回り込ませます。 </p> 結果
align属性で画像を片端に寄せ、画像の横に、テキストを複数行配置することができます。 TOP |
ご意見・ご感想などございましたらこちらまで tada_hp@hotmail.com
Copyright (C) 2004 by K.Y All Rights Reserved.