.
HOME > HTML > 画像
画像 タグ

画像を配置する
画像サイズの指定
画像に枠をつける
画像の代替テキスト表示
画像とテキストの位置指定
画像の周りに余白を作る
<img src= >
<img src= width= height= >
<img src= border= >
<img src= alt= >
<img src= align= >
<img src= hspace= vspace= >


画像を配置する 上に戻る

<img src=ファイル名>
画像をページに配置します。
(例)
<img src=sample1.gif>
画像を配置します。

画像の配置−Microsoft Internet Explorer
  ファイル(F) 編集(E)...

画像を配置します。

画像サイズの指定 上に戻る

<img src=ファイル名 width=☆ height=☆>
☆:ピクセル数か%
width:横幅 height:高さ
画像のサイズを指定することが出来ます。 ピクセル数かブラウザのウィンドウサイズに対する%で指定可能です。

(例)
<img src=sample1.gif width=30 height=25>
<img src=sample1.gif width=60 height=50>

画像のサイズ−Microsoft Internet Explorer
  ファイル(F) 編集(E)...

30*25    60*50

画像に枠をつける 上に戻る

<img src=ファイル名 border=ピクセル数>
画像の周りに枠をつけます。
(例)
<img src=sample1.gif border=1>
<img src=sample1.gif border=5>

枠をつける−Microsoft Internet Explorer
  ファイル(F) 編集(E)...

border=1     border=5

画像の代替テキスト表示 上に戻る

<img src=ファイル名 alt=代替用テキスト>
配置した画像が表示されなかった場合に変わりにテキストを表示します。 画像が表示された後は画像にポインタを置くとテキストがポップアップします。
(例)
<img src=sample.gif alt=文字が出る>
<img src=sample1.gif alt=文字が出る>

代替テキスト表示−Microsoft Internet Explorer
  ファイル(F) 編集(E)...
文字が出る      文字が出る
表示されなかった場合 表示された場合

画像とテキストの位置指定 上に戻る

<img src=ファイル名 align=☆>
☆:top,middle,bottom
top:上 middle:真ん中 bottom:下
配置した画像とテキストの位置を指定します。

☆:left,right
left:画像を左に寄せる。
right:画像を右に寄せる。
テキストを回り込みさせたい場合に使います。

テキストの回り込みを中断さたい場合は
<br clear=□>を使います。
□:left,right,all
(例)
左上)<img src=sample1.gif align=top>上に表示

右上)<img src=sample1.gif align=bottom>下に表示

左下)<img src=sample1.gif align=left>テキストを右に表示

右下)<img src=sample1.gif align=right>テキストを左に表示

位置指定−Microsoft Internet Explorer
  ファイル(F) 編集(E)...
上に表示
下に表示
テキストを
右に表示
テキストを
左に表示

画像の周りに余白を作る 上に戻る

<img src=ファイル名 hspace=☆ vspace=☆ >
☆:ピクセル数
hspace:左右の余白。
vspace:上下の余白。
ピクセル数で指定します。
(例)
<img src=sample1.gif hspace=30 vspace=20>横に30の
縦に20の余白ができます。

余白を作る−Microsoft Internet Explorer
  ファイル(F) 編集(E)...
横に30の
縦に20の余白ができます。


Copyright (C) 2005-2006 mu-a.net All Rights Reserved.