画像表示のためのＨＴＭＬ

　せっかく良い画像を作成しても、ホームページに上手に取り入れなかったら価値は発揮できませんね。そこで、知って得する画像表示のためのＨＴＭＬを解説します。
（ＨＴＭＬの基本について知りたい方は「ホームページの基礎の基礎」をご覧下さい。）

７．１基本の形

<IMG>タグを使って、文字の一要素として表示する方法です。
例えば、ＨＴＭＬを、

これは<IMG SRC="../image/gazou.gif" WIDTH=40 HEIGHT=40>カメラです。

と記述すれば、

これは

カメラです。

と表示されます。以下にＨＴＭＬの解説を追記します。

SRC="パス/画像ファイル名"で画像ファイルを指定します。

（パス/画像ファイル名の説明）
　パスとは指定するファイルの存在するフォルダを指定するもので、元のファイル（<IMG SRC="‥‥を書いているファイル）からの相対位置で指定するのが良いと思います。
　相対パスの指定方法は次の通りです。

WIDTHとHEIGHTは画像の寸法（幅と高さ）をドット数で指定します。
これを記述しなくても画像は表示されますが、画像の読み込み前後でレイアウトが変わるのを防ぐために、記述するのが良いでしょう。）
<A HREF="…"><IMG SRC="…"></A>で画像をリンクポインタとして使うと画像の周りにリンク色の枠が付きますが、IMGタグにBORDER=0を記述することで枠が消えます。

７．２画像の周りに文字を配置する

画像の横に文字を表示するには、<IMG>タグのALIGN属性で画像の位置を指定します。

例えば、ＨＴＭＬを

<IMG SRC="../image/gazou.jpg" WIDTH=200 HEIGHT=133 ALIGN=left>ここに記述した文字は、画像の右側に表示されます。<BR CLEAR=all>ここからは、画像の下に表示されます。

と記述すれば、

ここに記述した文字は、画像の右側に表示されます。
ここからは、画像の下に表示されます。

と表示されます。

ALIGN=rightとすれば文字が左側に表示されます。
文章を横に記述する必要がなくなったところには<BR CLEAR=all>を記述しておきます。
画像と文字の間に余白を入れるには、<IMG>タグのVSPACE属性とHSPACE属性で指定します。上の例で、
<IMG SRC="../image/gazou.jpg" WIDTH=200 HEIGHT=133 ALIGN=left VSPACE=10 HSPACE=20>のように記述します。（10や20の数値を変えると余白の幅が変わります。）

７．３ページの背景として画像を使う

ページの背景として画像を使う場合は<BODY>タグの属性として次のように記述します。

この場合、画像は縦・横方向に繰り返し使われてページ全面に貼りつけられます。このホームページのトップページのようになります。

７．４部分的な背景として画像を使う

<DIV>タグにスタイルシートを使うとページの一部に背景画像を設定できます。この部分がそうです。ＨＴＭＬは次のとおりです。

repeat-yは画像を縦方向だけに繰り返し表示することを指定します。横方向に繰り返し表示する場合はrepeat-xとします。何も記述しなければ両方向に繰り返し表示されます。no-repeatとすれば一枚だけ表示されます。
#ffffccは画像を表示しない所の色を指定します。
<BODY>タグにSTYLE以下を適用すればページ全体に適用できます。
スタイルシートはブラウザの種類やバージョンによっては意図したとうりには表示されない場合があります。必ずインターネットエクスプローラとネットスケープナビゲータで確認するようにしましょう。

７．５画像の位置を指定する

スタイルシートを使うと画像を表示する位置を指定できます。
ＨＴＭＬは次の通りです。

LEFT:150px（左から150ピクセル）TOP:20px（上から20ピクセル）の数値で表示位置を指定します。ぺージの左上からの絶対位置で指定します。（「:」と「;」を正確に使い分けて下さい。）
位置の異なるものを複数記述すれば、画像を重ねて表示することができます。
<IMG>タグの代わりに文章を記述すれば、文章が表示できるので、画像の上に文章を表示することもできます。

画像と文字の重ね表示の例は、ここをクリックして下さい。

７．６マウスで画像を替える

下の絵の上にマウスカーソルを持ってきて見ましょう。絵が替わったでしょう。マウスを戻すと絵も戻ります。

これを実現するには、ヘッダ部（<HEAD>～</HEAD>の間）に次のように記述します。

そして、画像を表示するところに、次のように記述します。

fuyu.jpg：通常時表示する画像
natu.jpg：マウスを載せた時表示させる画像