| 画像の挿入 <IMG> |
HOME > HTML > 画像の挿入（イメージの挿入）<IMG>
タグ 属性 サポート <IMG>
src="url"
border="n"
height="n"
width="n"
alt="コメント"
lowsrc="url"
align="*"
vapace="n"
hspace="n"
e2〜N2〜H2〜
e2〜N2〜H2〜
e3〜N2〜H2〜
e2〜N2〜H3〜
e2〜N2〜H3〜
e2〜N2〜H2〜
e4 N2
e2〜N2〜H2〜
e2〜N2〜H3〜
e2〜N2〜H3〜■ 説明
<IMG>タグの、srcは画像をwebページに表示させるタグです。一般的にGIF形式とJPRG（JPG）の画像などが使用できます。
srcの属性値にURLを記入します。URLはフルパスと相対パスで指定できます。
■ 記述<img src="画像のURL">
<img src="abc.gif"> ■ 表示結果
ブラウザのバージョンによって違いますが、画像の周りに枠線（外枠）がつきます。外枠を消すためには下記の「枠線を指定」を参照
| ■ 枠線を指定 <border> |
■ 説明
<img>タグのborderは、枠線を指定する属性があります。属性値には数字の0〜ピクセルで指定できます。
■ 記述<img src="画像のURL" border="n">
<img src="abc.gif" border="5"> ■ 表示結果
■ 枠線を消す方法
枠を消したい場合は、border="0"として下さい。
| ■ ザイスを指定 <height><width> |
■ 説明
<img>タグのheightとwidthはそれぞれ画像のサイズを指定する属性があります。属性値にはピクセルまたは、ウィンドウに対する％で指定します。
- width="150"＝画像の横幅 ピクセル数または、ウィンドウに対する％で指定
- height="60"＝画像の縦幅 ピクセル数または、ウィンドウに対する％で指定
■ 記述 <img src="URL" width="数値" height="数値">
<img src="画像のURL" width="150" height="60"> ■ 表示結果
widthと heightの属性は、ページに表示させる画像のサイズを指定するオプションです。これらで指定をしない場合は、画像がもつ本来のサイズになります。指定する場合は任意のサイズで変更できますが、極端なサイズ変更は画像がみだれる原因になります。
| ■ 画像にマウスをもっていくとアラートで表示 <alt> |
■ 説明
画像の上にマウスをおいてください、文字が出ます。また、画像が表示されない場合に文字で表示します。これが<img>タグのaltの属性です。
■ サンプル
■ 記述
<img src="画像の名前"alt="説明文を記入">
| ■ 画像を2段階で表示する <lowsrc> |
■ 説明
LOWSRCの属性は、本画像を表示する前に仮の画像をさきに表示させる属性です。 SRCと組み合わせると2段階表示させることができます。
使い方としては、最初に画質を下げた容量の小さい画像を表示させてれば良いでしょう。
■ 記述 <img src="画像のURL" lowsrc="画像のURL">
<img src="aaa.gif" lowsrc="bbb.gif">
このLOWSRCは、Internet Explorer 4とNetscape Navigator 2.0のみサポートされています。
サンプルは無しです。
| ■ テキストの回りこみを指定 <ALIGN> |
■ 説明
ALIGINは、画像の横にテキストを回りこみさせる属性です。属性値を指定すると左右の回り込みが可能になります。
テキストが回りこむ位置
- left ＝左に画像、右にテキストが回りこむ
- right＝右に画像、左にテキストが回りこむ
■ 記述 <img src="画像のURL" align="属性値">
<img src="画像のURL" align="left"> ■ 表示結果
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
回り込みを中断させるには<br>タグのclearを使います。
| ■ 回り込んだテキストと画像の余白 <VSPACE> <HSPACE> |
■ 説明
VAPACE、HSPACEはalign（上記参照）で回り込んだテキストと画像の余白を指定する属性があります。属性値はピクセルで指定します。
- vapace="上下のスペースをピクセルで指定"
- hspace="左右のスペースをピクセルで指定"
■ 記述 <img src="url" align="*"vapace="n"hspace="n">
<img src="abc.gif" align="left"vapace="10"hspace="10"> ■ 表示結果
回り込みを中断させるには<br>タグのclearを使います。
| ■ 画像にたいするテキストの位置 <ALIGN> |
■ 説明
ALIGNの属性は、属性を指定することにより、画像にたいするテキストの上下位置を指定する役割もあります。
属性値 top 上にならぶ center 中央にならぶ bottom 下にならぶ texttop 行の中で最も高い位置にならぶ absmiddle 行の中で最も高い位置での中央にならぶ absbottom 行の中で最も下にあるものと位置を揃える baseline bottamと同じ ■ 記述 <img src="画像のURL"align="属性値">
<img src="画像の名前"align="位置を指定"> ■ 表示結果
[HOME]
