無料ではじめる!ホームページ入門〜ホームページ作成解説サイト〜 HOME HP HTML UP other Link about

HOME > HTML > HTML逆引きリファレンス > イメージ

イメージ

画像を表示したい

<img src="○" alt="●">
○…画像ファイルのURL
●…画像の代わりのテキスト

<img>タグで指定します。src属性に画像ファイルのURLを、alt属性に画像の代わりに表示されるテキストを指定します。
画像を読み込まないように設定してあるブラウザなどでは、このテキストが表示されます。

HTMLソース
<img src="../img/dog.gif" alt="犬">

結果
犬

TOP

画像のサイズを指定したい

<img src="○" width="●" height="□">
○…画像ファイルのURL
●…幅(ピクセルまたはパーセント)
□…高さ(ピクセルまたはパーセント)

width属性で画像ファイルの幅を、height属性で画像ファイルの高さを指定します。ピクセルか、ウィンドウに対するパーセントで指定します。

HTMLソース
<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="●">
○…画像ファイルのURL
●…枠線の太さ(ピクセル)

通常画像の周りには枠線は引かれませんが、border属性により枠線を設定することができます。

HTMLソース
<img src="../img/dog.gif" border="2">

結果

TOP

テキストとの並び方を指定したい

<img src="○" align="●">
○…画像ファイルのURL
●…top、middle、bottom

align属性で画像とテキストの並べ方を指定することができます。指定しない場合はbottomの位置になります。
top…画像の上部と周囲のテキストの上部を揃えます。
middle…画像の中央と周囲のテキストのベースラインを揃えます。
bottom…画像の下部と周囲のテキストのベースラインを揃えます。

HTMLソース
<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="●">
○…画像ファイルのURL
●…left、right

align属性で画像を片端に寄せ、画像の横に、テキストを複数行配置することができます。
left…画像を左に寄せ、テキストを右に回り込ませます。
right…画像を右に寄せ、テキストを左に回り込ませます。

HTMLソース
<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属性で画像を片端に寄せ、画像の横に、テキストを複数行配置することができます。
left…画像を左に寄せ、テキストを右に回り込ませます。
right…画像を右に寄せ、テキストを左に回り込ませます。

犬

align属性で画像を片端に寄せ、画像の横に、テキストを複数行配置することができます。
left…画像を左に寄せ、テキストを右に回り込ませます。
right…画像を右に寄せ、テキストを左に回り込ませます。


TOP

画像に対する回り込みを解除したい

<br clear="○">
○…画像ファイルのURL
●…all、left、right

<br>タグのclear属性でテキストの回りこみを解除できます。以降のテキストは画像の下から続けられます。
left…画像が左側にあるときの回り込みを解除。
right…画像が右側にあるときの回り込みを解除。
all…どちらの場合も有効。

HTMLソース
<img src="../img/dog.gif" alt="犬" align="left">
<p>&lt;br&gt;タグのclear属性でテキストの回りこみを解除できます。以降のテキストは画像の下から続けられます。<br clear="left">
left…画像が左側にあるときの回り込みを解除。<br>
right…画像が右側にあるときの回り込みを解除。<br>
all…どちらの場合も有効。<br></p>
<img src="../img/dog.gif" alt="犬" align="left">
<p>&lt;br&gt;タグのclear属性でテキストの回りこみを解除できます。以降のテキストは画像の下から続けられます。<br clear="right">
left…画像が左側にあるときの回り込みを解除。<br>
right…画像が右側にあるときの回り込みを解除。<br>
all…どちらの場合も有効。</p>

結果
犬

<br>タグのclear属性でテキストの回りこみを解除できます。以降のテキストは画像の下から続けられます。
left…画像が左側にあるときの回り込みを解除。
right…画像が右側にあるときの回り込みを解除。
all…どちらの場合も有効。

犬

<br>タグのclear属性でテキストの回りこみを解除できます。以降のテキストは画像の下から続けられます。
left…画像が左側にあるときの回り込みを解除。
right…画像が右側にあるときの回り込みを解除。
all…どちらの場合も有効。


TOP

画像とテキストの間隔を指定したい

<img src="○" vspace="●" hspace="□">
○…画像ファイルのURL
●…画像に対する上下の余白(ピクセル)
□…画像に対する左右の余白(ピクセル)

vspace属性で画像の上下に、hspace属性で画像の左右に余白を設けることができます。

HTMLソース
<img src="../img/dog.gif" align="left" vspace="10" hspace="10">
<p> align属性で画像を片端に寄せ、画像の横に、テキストを複数行配置することができます。<br>
left…画像を左に寄せ、テキストを右に回り込ませます。<br>
right…画像を右に寄せ、テキストを左に回り込ませます。 </p>

結果

align属性で画像を片端に寄せ、画像の横に、テキストを複数行配置することができます。
left…画像を左に寄せ、テキストを右に回り込ませます。
right…画像を右に寄せ、テキストを左に回り込ませます。


TOP

当サイトへのリンクは確認不要です。
ご意見・ご感想などございましたらこちらまで tada_hp@hotmail.com
Copyright (C) 2004 by K.Y All Rights Reserved.
SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送