※ここの解説は、後になるほど省略されている場合がありますのでできるだけ順番に読んでください。
■ 5.画像の表示
文字の飾り付けができるようになるともっと様々な文字を表示したいと思うようになります。
たとえば、文字に影やグラデーションを付けたり、立体文字を表示したいと思ったりします。
ところがこれらは、文字の飾り付けでは不可能なので「画像ソフトなどで作成して表示」ということになります。
また、背景に画像を挿入したり、パターンを表示するというときにも使用します。
ページの背景に画像を挿入する場合は、BODYタグで指定します。
<BODY BACKGROUND="baloon.gif">
<BODY BACKGROUND="baloon.gif" style="background-repeat: no-repeat;">
<BODY BACKGROUND="baloon.gif" style="background-repeat: repeat-x;">
<BODY BACKGROUND="baloon.gif" style="background-repeat: repeat-y;">
などと記述します。
「no-repeat」は背景画像を１つだけ表示する場合に、
「repeat-x」は背景画像を横方向のみに繰り返す場合に、
「repeat-y」は背景画像を縦方向のみに繰り返す場合に、指定します。
<BODY style="background-image: url(baloon.gif)">
詳しくは「HTMLの解説」−「14.スタイル属性」、「15.スタイルシート」をご参照下さい。
部分的に挿入する場合は、IMGタグを使用します。
<IMG SRC="atommin.gif" WIDTH="60" HEIGHT="20"
ALT="ロゴマーク">
などと記述します。
ALT属性は代替テキストの指定に使用します。
画像が表示できないとき、
の様に表示されます。
「WIDTH、HEIGHT」はその画像を表示する大きさを指定します。
「WIDTH="50" HEIGHT="20"」のとき 
「WIDTH="100" HEIGHT="40"」のとき
この指定で画像を小さくしても画像のファイルサイズが小さくなるわけではなく、見た目が小さくなってるだけです。
ですから、ファイルサイズの大きな写真などをこの指定で小さくして１ページに何枚も貼り付けると、全部の画像が表示されるまでに何分も掛かります。
できるなら、画像ソフトでファイルサイズも小さくしておきましょう。
また、原寸以外のサイズを指定すると画像が荒くなったり、文字が見えなくなったり変形したりしますので注意してください。
HP作成ソフトなどは無条件にこの指定が原寸サイズで設定されます。
しかし、コピーして張り付けたりすると画像の本当のサイズに自動変更してくれなかったりするので形が崩れたりします。
画像を原寸表示させたいときは、正しいサイズを指定しましょう。
画像の装飾として枠が表示できます。
<IMG SRC="atommin.gif" BORDER="8" ALT="ロゴマーク">
などと記述すると次の様に画像の周りに枠線が表示されます。
HTML4.01に準拠するなら、次のような記述に変更してください。
<IMG SRC="atommin.gif" ALT="ロゴマーク" style="border: 8px solid #9999ff;">
詳しくは「HTMLの解説」−「14.スタイル属性」、「15.スタイルシート」をご参照下さい。
次のように「ALIGN」属性を使用しますと、画像の「左寄せ」、「右寄せ」の指定ができます。
<IMG SRC="atommin.gif" ALT="ロゴマーク" ALIGN="left" VSPACE="10" HSPACE="20">
左の画像は、「ALIGN="left" VSPACE="10" HSPACE="20"」を指定した場合です。
ALIGN属性には、「left、right」を指定することができます。
この指定をすると自動的に文字が回り込みます。
VSPACE属性、HSPACE属性はそれぞれ画像の周りの余白を指定します。
<IMG SRC="atommin.gif" ALT="ロゴマーク" style="float: left; margin: 10px 20px;">
詳しくは「HTMLの解説」−「14.スタイル属性」、「15.スタイルシート」をご参照下さい。
文字の回り込みを指定した場合、途中で回り込みを解除させる場合は、
<BR CLEAR="left">のように記述し、解除したい画像の位置を指定します。
この次の行に、「<BR CLEAR="left">」と指定した場合。
スタイル属性を使用して次のように記述します。
<BR style="clear: left;">
詳しくは「HTMLの解説」−「14.スタイル属性」、「15.スタイルシート」をご参照下さい。
また、ALIGN属性に、「top、middle、bottom」を指定することもできます。
この場合は、画像の周りに表示される文字と、画像との縦の位置関係を指定するとき使用します。
「ALIGN="top"」と指定した場合の表示位置。
「ALIGN="middle"」と指定した場合の表示位置。
「ALIGN="bottom"」と指定した場合の表示位置。
<IMG SRC="atommin.gif" style="vertical-align: top;"> <IMG SRC="atommin.gif" style="vertical-align: middle;"> <IMG SRC="atommin.gif" style="vertical-align: text-bottom;">
詳しくは「HTMLの解説」−「14.スタイル属性」、「15.スタイルシート」をご参照下さい。
《画像指定の応用》
それでは、指定したい画像が別のフォルダにあった場合は、どのように指定したらいいのでしょうか？
例えば次のように自分のパソコンでHPを作成していた場合で説明します。
注意）画像フォルダは必ず自分のホームページを作成しているフォルダ内に作成してください。
そうしないと、サーバーにアップしたとき表示されません。
c:\home（ホームページのフォルダ） ├index.html（ホームページ） │ ├images（画像用のフォルダ） ｜└photo1.jpg（指定したい画像） │ └bun2（分類２のフォルダ） ├page21.html ├page22.html │ └bun21（分類２１のフォルダ） └page211.html
まず、index.htmlで「photo1.jpg」を指定する場合は、次のように記述します。
<img src="images/photo1.jpg">
次に、同じ画像をpage21.htmlで指定する場合は、次のように記述します。
<img src="../images/photo1.jpg">
上記の、「../」はひとつ上のフォルダを意味します。
ひとつ上にあがってから指定します。
二つ上の場合は、「../../」と記述します。
また、特殊な記述としては、「./」があり、これは現在のフォルダを指します。
上記の
<img src="images/photo1.jpg">
は、
<img src="./images/photo1.jpg">
と同義になります。
次に、page211.html で指定する場合は、次のように記述します。
<img src="../../images/photo1.jpg">
ここまでの記述はすべて相対指定と言います。
これに対して絶対指定があります。
例えば、同じ画像を次のように、絶対指定を使用して指定することもできます。
<img src="//www.freeweb.ne.jp/~t-atom/images/photo1.jpg">
<img src="/~t-atom/images/photo1.jpg">
サーバーによっては次のような指定で表示できることもあります。
<img src="/images/photo1.jpg">
注意）絶対指定をして素材屋さんの画像を「直リンク」しないで下さい。
相手に迷惑が掛かります。
その原因についてはここのトップページ「9.直リンク禁止ってどういう意味ですか？」をお読みください。