イメージタグ

イメージタグの基本

<img>タグは画像を表示させるタグですが、このタグには閉じタグがありません。下記の赤字の部分に画像までのパスを入力することによって、画像を表示させることが出来ます。

<img src="../img/title01.gif">

例

画像のサイズ

画像のサイズには、width属性とheight属性を使用します。widthは幅でheightは高さですが、画像サイズをこの属性によって変更すると画像が粗くなるので、本来の大きさを指定しましょう。下記の赤字の部分にそれぞれピクセル単位で数字を入力します。

<img src="../img/title01.gif" width="155" height="45">

例

スペーサー

上記に、widthとheightには本来の画像のサイズを入力すると記しましたが、単色の画像についてはわざと画像を小さく作り、この属性で大きくして容量を小さくするテクニックもあります。その一つがスペーサーです。
スペーサーとは、例えば、1X1pxのサイズの透過gif（透明なgif画像）をwidth属性とheight属性によってわざと大きくして、画像やテキストの間隔をとったりするものです。下記の例の場合、スペーサーを50X50pxに変更しているのですが、確かめるために例の下をドラッグして反転表示させてみてください。

<img src="../img/spacer.gif" width="50" height="50">

例

画像のalt属性

画像はSEO上、何も意味を持たないものです。そこで、altを追加することによって、テキストと同じくらい意味のあるものとすることが出来ます。しかし、スパム対策として画像のalt属性を読まないロボット型検索エンジンも多く、また、多く詰め込みすぎるとスパム認定を受けるので気を付けましょう。
下記の赤字の部分に、表示させたい語句を入力してください。画像にカーソルを合わせると、ツールチップが表示されます。

<img src="../img/title01.gif" alt="web raise">

例

画像のボーダー

画像に枠を付けたいときに使用するのがborder属性ですが、普通はあまり使いません。この属性を使用するのは、おもに、画像にリンクを貼る時です。画像にリンクを貼ったときにborder属性を0にしないと、リンク画像であることを示す青い（紫の）枠線が表示されレイアウトが乱れてしまいます。

<img src="../img/title01.gif" border="0">

例　borderを0にした場合

例　border属性を入力しない場合

画像の位置

画像の表示位置を指定するのがalign属性です。位置指定には、上下の指定であるtop、middle、bottomと、左右の指定であるleft、rightがあります。
なお、この属性を使用した場合、テキストは、上下の指定に関してはそれぞれの位置に表示されますが、左右の指定に関しては逆の位置に表示されます。

<img src="../img/title01.gif" align="right">

例

画像の位置を右にしているから、テキストは左に表示されています。

テキストの回りこみ解除

画像に対するテキストの回り込みを解除するのが<br>タグのclear属性で、解除したい場所にこのタグを入力します。
画像が左でテキストが右の場合はleft、画像が右でテキストが左の場合はright、左右両方の解除にはallを指定します。

これから回り込みを解除します。<br clear="all">解除しました。

例

画像の位置を左にしているから、テキストは右に表示されています。これから回り込みを解除します。
解除しました。

画像の周りに余白を入れる

画像の上下に余白を入れる属性がvspaceで、左右に余白を入れる属性がhspaceです。
それぞれピクセル単位で、下記の赤字の部分に数字を入力します。

<img src="../img/title01.gif" vspace="10" hspace="10">

例

画像上での右クリック禁止

画像の上で右クリックするとコンテキストメニューが表示されますが、これを禁止することが出来ます。右クリック禁止にするには、下記の赤字のjavascriptを<img>タグの中に入れてください。
なお、ページ全体で右クリックを禁止したいときは、<body>タグの中に下記のjavascriptを入れてください。

<img src="../img/title01.gif" onContextmenu="return flase">

例