ホームページ作成講座画像を表示する

画像表示タグ

<img src="" alt="" (他の属性…)>

画像はimgタグを使って表示します。終了タグはありません。

src="画像パス"

src属性で、画像ファイルのパスを指定します。

alt="画像の説明"

alt属性で、画像の説明を記述します。alt属性は絶対付ける必要があります。

width="横幅"

画像の横幅を指定します。ピクセル数で表したり、％で指定したりします。

height="縦幅"

画像の縦幅を指定します。ピクセル数で表したり、％で指定したりします。

title="画像の説明"

画像の上にマウスカーソルが乗ると、説明文がポップアップ表示されます。

alt属性について補足しておきます。ここに記述した説明文は、画像の読み込みに失敗した時に表示されます。 また視覚障害者が使用する音声読み上げブラウザでもalt属性値が利用されます。

alt属性の値はなるべく付ける方がいいですが、 ボタンや区切り線用の画像など説明が不要な場合は、値を空にしておきます。 alt属性自体は記述しておかなければなりません。

imgタグのサンプル

では画像を表示してみましょう。HomePageフォルダの中に、imgフォルダを作ってください。 このフォルダを画像専用フォルダにし、中に画像ファイルを置きます。

その中に、下のリンゴの画像を右クリックして、「apple.jpg」というファイル名でimgフォルダに保存して下さい。

さらにもう一つ、pictureというフォルダも作成してください↓

ではtemp.htmlを開いて、pictureフォルダの中に「lesson1.html」という名前で保存しましょう。 そしてbody内に以下のように記述してみてください。

<img src="../img/apple.jpg" width="128" height="128" alt="リンゴ128px">
<img src="../img/apple.jpg" width="64" height="64" alt="リンゴ64px">
<img src="../img/apple.jpg" width="50%" alt="リンゴ 幅50%">

ブラウザで表示すると、下のようになります。

リンゴの大きさがそれぞれ変わっていると思います。

width="128" height="128"

最初のimgタグは、縦横幅をこのように指定しました。 これは元の画像の大きさ（128px×128px）と同じです。 通常はこのように指定します。

width="64" height="64"

今度は縦・横共に半分の大きさで表示しています。実際に小さく表示されていると思います。 画像サイズを変えて表示したい場合は、このようにして指定できます。 ただし縦横比を元の画像と揃えなければ、歪んだ画像になってしまいます。

width="50%"

最後は、横幅50％で表示しました。ブラウザ画面の横幅50％で表示されます。 パソコンでは巨大なリンゴになりますが、スマートフォンでは最初のものとそんなに大きさが変わらないと思います。

画像の幅を％で指定すると、画面のサイズに応じて画像も伸縮します。 100%を指定すると画面幅いっぱいに画像が伸びます。

ここでは縦幅を指定していません。 横幅だけ指定すると、元の画像の縦横比に応じて縦幅が決まります。