前のページに戻る

HTML入門の表紙へ

次のページへ


4. 画像もそろえて

<IMG> タグのオプション指定 〜


4-1. 画像の名前は ALT

画像の名前は ALT オプションを使って指定することができます。

この名前は画像を読み込んでいる最中などに表示されますので、なるべく指定しておきましょう。

  <IMG SRC="moheji.gif" ALT="へのへのもへじ">

というように指定します。


4-2. 枠の指定は BORDER

BORDER を使えば、枠の太さをピクセル数で指定できます。

  <IMG SRC="moheji.gif" BORDER=5>

と指定すれば、

のようになります。

また、BORDER=0 を指定すれば、リンクを設定したときに表示される枠も表示されません。


4-3. 画像の大きさは WIDTH と HEIGHT

画像の大きさを変えるには、WIDTHで幅 を、HEIGHTで高さ を指定します。

ピクセル数または、画面の大きさに対する%が指定できます。

さきほどの絵も、

<IMG SRC="moheji.gif" WIDTH=200 HEIGHT=50>

と指定すれば、

のように横長にしたりできます。


4-4. 文字位置の指定は ALIGN

画像の横にある文は、次のように ALIGN="上下位置" で指定ができます。

ALIGN="top" :画像の上端にそろえる
ALIGN="middle" :画像の中央にそろえる
ALIGN="bottom" :画像の下端にそろえる

使用例 <IMG SRC="moheji.gif" ALIGN="top"> topのとき   
表示 topのとき

使用例 <IMG SRC="moheji.gif" ALIGN="middle"> middleのとき
表示 middleのとき

使用例 <IMG SRC="moheji.gif" ALIGN="bottom"> bottomのとき
表示 bottomのとき


4-5. 画像の位置と文字の回り込みも ALIGN

画像自体の表示位置は、<CENTER><DIV> タグを使ってそろえますが、ALIGNオプションを使って指定すれば文章を回り込ませることができます。

指定方法は次のように ALIGN="画像の位置" です。

ALIGN="left" :画像を左に表示し、 右に文章を回り込ませる。
ALIGN="right" :画像を右に表示し、 左に文章を回り込ませる。

使 用 例 テキストの回り込み指定の例です。 <IMG SRC="moheji.gif" ALIGN="left"> 左に画像を表示した例です。文章がこのように画像の右に回り込みます。まだマージンを指定していないので画像と文章との間にすきまがありません。
表 示 テキストの回り込み指定の例です。左に画像を表示した例です。文章がこのように画像の右に回り込みます。まだマージンを指定していないので画像と文章との間にすきまがありません。


4-6. マージン指定は HSPACE と VSPACE

画像と文章との間にすきま(マージン)を空けたいときには、

HSPACE=ピクセル数  :横方向のすきま
VSPACE=ピクセル数  :縦方向のすきま

を指定します。

さきほどの回り込みの例にマージンを指定すると、次のようになります。

使 用 例 テキストの回り込み指定の例です。 <IMG SRC="moheji.gif" ALIGN="left" HSPACE=20 VSPACE=20>
左に画像を表示した例です。文章がこのように画像の右に回り込みます。マージンを指定しているので画像と文章の間にすきまがあります。
表 示 テキストの回り込み指定の例です。左に画像を表示した例です。文章がこのように画像の右に回り込みます。マージンを指定しているので画像と文章の間にすきまがあります。


4-7. <IMG>タグのオプションまとめ

オプション 説明
SRC="ファイル名" 表示する画像ファイルの指定
ALT="名前" 画像の名前を指定
BORDER=ピクセル数 枠線の太さの指定
WIDTH=ピクセル数または%
HEIGHT=ピクセル数または%
画像の横幅と縦幅を指定
ALIGN="文の上下位置"
(top / middle / bottom のいずれか)
画像の横の文の位置 (上/中央/下) を指定
ALIGN="画像の位置"
(left / right のいずれか)
画像の位置 (左/右)
と文章の回り込みを設定
VSPACE=ピクセル数
HSPACE=ピクセル数
画像まわりの、縦と横のマージン(すきま)を指定

これだけ使えれば、IMGタグは完ぺきです。

、かといって、これらすべてを覚える必要はありませんので 、 「こういう指定ができたっけな」 ということだけ覚えておきましょう。



前のページに戻る

HTML入門の表紙へ

次のページへ