【第２５講】画像の貼り付け・応用編

（1998年11月24日更新）

【There have been visitors since 1997. 9.24.】

　この講では、第24講で取り上げた<IMG>タグについて、画像イメージを配置する位置についての属性を見ていきます。

【画像の位置揃え】
<IMG  SRC="src"  ALIGN=align>
※src＝{画像ファイルのアドレス}
※align＝{top,middle,bottom}

　例によってALIGN属性の登場ですが、今回の属性の値alignは、今までとは異なり、上端揃えならtop、中央揃えならmiddle、下端揃えならbottomを指定します。この3つがどのように表示されるのかを実際に見てみましょう。

画像の<IMG SRC="logo.gif" ALIGN=top>上端揃え。<P> 画像の<IMG SRC="logo.gif" ALIGN=middle>中央揃え。<P> 画像の<IMG SRC="logo.gif" ALIGN=bottom>下端揃え。<P>

（表示結果）

画像の中央揃え。

画像の下端揃え。

【画像の大きさ】
<IMG  SRC="src"  WIDTH=width  HEIGHT=height>
※src＝{画像ファイルのアドレス}
※width＝{pixel}
※height＝{pixel}

　WIDTH属性とHEIGHT属性を指定すると、画像イメージのサイズ（横幅・縦の高さ）を指定できます。それぞれの値widthとheightにピクセル数で指定すると、画像イメージを指定したサイズに拡大・縮小させて表示します。

<IMG SRC="question.gif" WIDTH=54 HEIGHT=22>通常（横54×縦22） <IMG SRC="question.gif" WIDTH=108 HEIGHT=22>横倍角（横108×縦22）<P> <IMG SRC="question.gif" WIDTH=81 HEIGHT=33>９／４倍角（横81×縦33） <IMG SRC="question.gif" WIDTH=27 HEIGHT=11>１／４倍角（横27×縦11）<P> <IMG SRC="question.gif" WIDTH=54 HEIGHT=44>縦倍角（横54×縦44） <IMG SRC="question.gif" WIDTH=108 HEIGHT=44>４倍角（横108×縦44）

（表示結果）

９／４倍角（横81×縦33）１／４倍角（横27×縦11）

縦倍角（横54×縦44）４倍角（横108×縦44）

【画像の枠の幅】
<IMG  SRC="src"  BORDER=border>
※src＝{画像ファイルのアドレス}
※border＝{pixel}

　BORDER属性を指定すると、画像イメージの上下左右の枠の太さを変えることができます。値borderはピクセル数で指定しますが、0を指定すると、枠なしになります。また、リンク（第27講）の場合には枠が表示されますが、それ以外の場合は、BORDER属性を指定したときのみ枠が表示されます。

<IMG SRC="logo.gif">指定なし<P> <IMG SRC="logo.gif" BORDER=0>枠の太さ＝０<P> <IMG SRC="logo.gif" BORDER=10>枠の太さ＝１０

（表示結果）

【画像の周囲余白】
<IMG  SRC="src"  HSPACE=hspace>
<IMG  SRC="src"  VSPACE=vspace>
※src＝{画像ファイルのアドレス}
※hspace/vspace＝{pixel}

　画像の周囲に余白をとりたいが、枠は色がつくので嫌だという場合は、HSPACE・VSPACE属性を指定するといいでしょう。hspaceピクセル分の余白を左右にとり、vspace分の余白を上下にとります。

　どの属性を使う場合でも、画像を貼り付けるわけですから、SRC属性で貼り付ける画像を指定するのを忘れないようにしましょう。

【第２６講】Wordで画像を挿入

【第２５講】に関する質問フォーム

【第２４講】画像の貼り付け・基本編