画像を表示させてみよう

画像を表示させてみましょう。枠と背景を付けてみようでは背景画像を表示させましたが、しょせん背景。コンテンツのメインではないですね。
やっぱり、「今年の学園祭はこんなだよ!」とか、イメージを膨らませてくれる画像を貼りたいですね。

画像を表示させるには、表示させたいところに
<img src="画像ファイル名">
と書いておきます。画像ファイル名の指定がややこしくなってしまうので、今は表示させる画像をhtmlファイルと同じフォルダに入れておきましょう。
下の例の画像はまたまたWEBデザイナーが作った超シンプル素材集 | WEB素材 ボタン 背景画像 矢印アイコンさんから。


サンプル

画像が1つ、表示されました。前後に文章を入れるとこんな感じになります。

あいうえお
かきくけこ
さしすせそたちつてと
なにぬねの
はひふへほ

サンプル
あいうえお
かきくけこ
さしすせそたちつてと
なにぬねの
はひふへほ

何が起きているかというと、3行目は画像の高さだけ行がうんと高くなっていて、その行の中に「さしすせそ」も画像も「たちつてと」も全て収まっているという状態です。
画像だけで1行を占領するとか、画像の横に文章が何行も並ぶとか、そういうことはありません。見ての通り縦の長さが60pxの画像でさえ読みづらくしてしまっているので、大きい画像を扱う時は気を付けて。

imgの設定あれこれ

「src」さえ書けば画像を表示してくれるimgですが、各種設定項目があります。srcの後ろに続けて書いてみましょう。

まずはalt結局必須なのか必須じゃないのかあいまいな設定項目ですwHTML5では任意。
詳しい仕様はぐぐってほしいのですが、ここには万が一画像が表示されなかった時のための代わりになる文章を入れておきます。こーゆー画像だよ、と。装飾目的の画像で、わざわざ代わりに文章表示してくれなくてもいいよ、というときは空にしておきます。
私は毎回欠かさずalt属性を設定していますが、いつも空です。

水色の斜めストライプ画像

マウスカーソルを上にかぶせた時に画像タイトルか何かを表示させたい場合はtitleを使います。試しに下の画像にマウスカーソルを合わせてみてください。


サンプル

画像にはwidthとheightで大きさを設定することが出来ます。CSSにいろいろなパターンで書いてみましょう。
なお、この画像の大きさは60px四方です。

/*横の長さを30pxに*/
.width30{
	width:30px;
}
/*縦の長さを90pxに*/
.height90{
	height:90px;
}


サンプル

縦の長さだけ、横の長さだけを指定すると、指定していない方もつられて大きさが変わりましたね。縦横比固定で拡大or縮小、ってやつです。
では、この「横の長さを30px」と「縦の長さを90px」を同時につかうとどうなるでしょうか。


サンプル

縦横比が変わりましたね。
サムネイルとして小さいサイズを指定し表示、という手に使えますが、結局読み込む画像の重さは変わらないので、ほどほどにしておきましょう。特に写真などはちゃんと画像編集ソフト等で小さくしたものをサムネイルとして使った方が表示が早いです。