写真やイラストを表示したいことはよくあります。なんでも写真を1枚用意しましょう。この画像ファイルをindex.htmlがあるフォルダーに入れておきます。今回は⇩
この画像を使います。サイズは「1500×1000」で335KBで、ファイル名は「e500.jpg」です。HTMLに画像を貼る場合には軽いものにしましょう。「縮小専用」というフリーソフトを使うと大量の画像も一気に小さくできます。
画像(img)
画像表示はimg要素を用います。ちょっと特殊でイメージファイルが収められているアドレスも必要です。index.htmlと同じ階層にファイルがある場合は「ファイル名のみ」となります。
img要素
使用例：
<!DOCTYPE html>
<html lang="ja">
<body>
<img src="e500.jpg">
</body>
</html>HTML表示
このように画面いっぱいに表示されてしまうと思います。ではサイズをコントロールしましょう。横300ピクセルで表示させてみましょう。
width（横）・height（縦）
使用例：
<!DOCTYPE html>
<html lang="ja">
<body>
<img src="e500.jpg" width="300">
</body>
</html>HTML表示
適度な大きさになりました。長さを横方向しか設定してませんが縦横比は固定されて拡大縮小を自動的に行ってくれます。もし縦方向も書きたいなら
<img src="e500.jpg" width="300" height="300">としましょう。この場合、縦横比は固定とならないので注意しましょう。こんな感じです⇩
なのでheightはちゃんとした理由がないとき以外書かない方がベストです。
ここで注意
今までimg要素を単独でポイっとHTMLの中に書いていましたがこの書き方はよくありません。単独で大きな画像を出したときはp要素やfigure要素の中に入れるのがベストです。figure要素についてはあとで。
画像の表示（標準的な方法）
使用例：
<!DOCTYPE html>
<html lang="ja">
<body>
<p><img src="e500.jpg" width="300"></p>
<p>台湾旅行中に台中線泰安駅で撮影したE500です。東芝府中工場で作られた機関車は武蔵野線などを経由して船で台湾に運ばれました。古くなったPP自強号の機関車として活躍しています。</p>
</body>
</html>HTML表示
説明文つきの画像（figure要素）
画像に説明文を入れるときにはfigure要素を用います。figure要素は説明文なし（写真のみ）でも使えます。
説明文つきの画像表示
使用例：
<!DOCTYPE html>
<html lang="ja">
<body>
<figure>
<img src="e500.jpg" width="300">
<figcaption>台鉄E500</figcaption>
</figure>
</body>
</html>HTML表示
p要素とは画像の位置が少し変わりますが使い方として同じです。figcaptionは画像の上に使うこともできます。
雑誌のように長い文章の横に画像を表示したいことがありますがHTMLでは非推奨とされています。文章と文章の間に画像表示というのがまるでルールのように浸透しています。画像の配置についてCSSで行いましょう。