画像を表示しよう

文字だけのページも素敵ですが、そこに写真やイラストが1枚あるだけで、ぐっと伝わりやすく、にぎやかになります。画像を表示するタグは <img>。ここまでのタグと、ひとつだけ違うところがあります。

imgの書き方

<img src="/photo.jpg" alt="窓辺でくつろぐシマエナガ">

分解するとこうです。

<p> や <a> は中身をはさみましたが、<img> は「ここに画像！」と置くだけ。だから </img> はいりません。“サンドイッチ型”とは少し違う、ということだけ頭のすみに置いておきましょう。

alt（説明文）は思いやり

alt は、画像が表示できないときに代わりに出る文字であり、目の見えない人が使う読み上げソフトが読み上げる文章でもあります。

<img src="/cake.jpg" alt="いちごがのったショートケーキ">

alt に「いちごがのったショートケーキ」と書いておけば、画像が出せない状況でも何の画像かが伝わります。ほんの一言で、いろんな人にやさしいページになる。だから alt は、飾りではなく大切な役目です。

このレッスンのまとめ

1. 画像は <img src="場所" alt="説明"> で表示する
2. <img> は中身をはさまない（終了タグなし）
3. alt の説明文は、見えない人にもやさしい大切な役目

src は自分の画像ファイルの名前に、alt は「何が写っているか」を一言で。これで、あなたのページに顔写真がつきました。 :::