ウェブ木箱：HTML講座-画像を貼り付けてみよう

画像ファイルの用意はできたかな？画像ファイルは必ずHPを入れておくフォルダの中に入れておこう。 HPを作る場合、ファイル同士の位置関係って言うのは何かと大切になってくるのでこれは忘れずに。画像を貼り付けるときは次のタグと属性を使うよ。

『ここに画像を貼り付ける』という意味のタグは<img>、
画像の場所とファイル名を指定する属性名はsrcだよ。

<img>は<br>と同じ空要素なので終了タグはないよ。 srcの属性値はパスと言って『○○にある△△という画像』っていう感じにファイルの場所を指定するものなんだけど、画像ファイルが画像を貼り付けるHTMLファイルと同じフォルダ内にある場合にはその画像ファイルの名前を属性値として指定すればOKだよ。

パスについては後々詳しく説明するので、今の段階ではHTMLファイルと画像ファイルは同じフォルダ内に入れておいてね。では次の例は同じフォルダ内のkeiryou.gifというファイルを貼り付ける場合。


<html> <head> <title>腹減り日誌♪</title> </head> <body> <img src="keiryou.gif"><br> 計量カップからジュースでも沸いてこないかな？ </body> </html>

腹減り日誌♪ -

計量カップからジュースでも沸いてこないかな？

ブラウザでの表示はこちら(別ウィンドウ)

属性を使って貼り付けた画像の大きさを指定することもできるよ。元の画像よりも大きくすれば拡大できるし、小さくすれば縮小することも出来る。でもまぁあまり綺麗ではないのでね、拡大や縮小をする場合はソフトを使って元の画像の大きさを変更した方がいいかも。ペイントでやるとHTMLで拡大・縮小するのと大差ないけど PhotoShopやpaintShopProなどのソフトで拡大・縮小するとある程度滑らかに仕上げてくれるよ。

それはさて置き、これはHTML講座なのでHTMLで大きさを指定する方法を紹介するよ。

画像の横幅を指定する属性名はwidth、
画像の縦幅を指定する属性名はheightだよ。

次のサンプルは元の画像の大きさが75×50、これをそれぞれ拡大・縮小してみた感じを確かめてね。

<html>
<head>
 <title>腹減り日誌♪</title>
</head>
<body>
<img src="risu.gif" width="37" height="25">
<img src="risu.gif" width="75" height="50">
<img src="risu.gif" width="150" height="100"><br>
大きいとお腹も減るのかな？
</body>
</html>

腹減り日誌♪ -

大きいとお腹も減るのかな？


		真ん中が元の画像の大きさだよ。

ブラウザでの表示はこちら(別ウィンドウ)

widthやheight属性で大きさの指定がない場合は画像は元の大きさで表示されるようになっている。だったら元の大きさでいい時はわざわざ指定することはないんじゃないかと思うだろうけどページの表示を早くするために必ず指定した方がいいかも。そのページの構造やブラウザにもよるんだけど画像を読み込んでからでないとページを表示できない場合もあるし画像が読み込まれる度にページが再描画される (文字などがその都度移動する)なんてこともありえるので、体感的にスムーズな読みこみが出来ない場合があるんだ。

画像の元の大きさを調べる方法はいくつかあるけどブラウザで調べるにはまずブラウザでその画像を開き (ページに貼り付けた状態でもOK、ただしその場合はwidthもheightも指定しない状態で) 右クリックで出てくるメニューからプロパティを開こう。そうするとインターネットエクスプローラなら規模という項目、ネットスケープ(バージョン６以上)なら幅、高さという項目で画像の元の大きさが表示されるよ。

	次はページの背景に画像を使う、所謂壁紙の指定の仕方だよ。次へ→
	前回は画像を貼り付ける仕組みについてだよ。 ←前へ

	画像編－２
	HTML講座第１２回

		画像を貼り付けてみよう

		画像の大きさを指定しよう

		画像の元の大きさの調べ方