【6日でできるHTML＆CSS入門】画像の表示

―HTML に画像を“埋め込む”という発想―
　Web ページの第一印象は、テキストよりもビジュアルで決まります。HTML では <img> タグひとつで画像を読み込みつつ、サイズ調整や代替テキスト、レスポンシブ対応まで柔軟に制御できます。ここでは「画像フォルダの配置」から「属性の活用」「形式ごとの特徴」まで段階的に解説し、動作するサンプルコードで理解を深めます。

１．画像を読み込む基本

素材のダウンロード

以下のリンクから使用する素材をダウンロードできます。

image

displaying-images ダウンロード

1.1. プロジェクト構成

images フォルダに画像を置き、HTML から相対パスで参照するのが定番です。

├─ lesson16_1.html
├─ lesson16_2.html
├─ lesson16_3.html
├─ lesson16_4.html
├─ lesson16_5.html
└─ images/
   └─ sunset.jpg

1.2. `<img>` タグ最小形

ファイル名： lesson16_1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>写真を表示する</title>
</head>
<body>
  <h1>美しい夕焼け</h1>
  <img src="images/sunset.jpg" alt="夕焼けの写真">
</body>
</html>

表示結果

見出し「美しい夕焼け」の下に sunset.jpg が実寸で表示される。

1.3. `alt` 属性の重要性

　alt は画像が読み込めない環境・スクリーンリーダー向けの代替テキスト。SEO でも評価対象になるため必須と考えましょう。

２．サイズとキャプションを指定する

2.1. 幅・高さをピクセル指定

ファイル名： lesson16_2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>写真を表示する</title>
</head>
<body>
  <h1>美しい夕焼け</h1>
  <img src="images/sunset.jpg"
     width="200" height="150"
     alt="200×150 ピクセルの夕焼け"
     title="クリックで拡大">
</body>
</html>

表示結果

幅 200×高さ 150 px に縮小。ホバーするとツールチップ「クリックで拡大」。

2.2. `figure` と `figcaption` でキャプション付き表示

ファイル名： lesson16_3.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>写真を表示する</title>
</head>
<body>
  <h1>美しい夕焼け</h1>
  <figure>
    <img src="images/sunset.jpg" alt="夕焼け">
    <figcaption>夏の終わりを告げる夕焼け（撮影地：湘南）</figcaption>
  </figure>
</body>
</html>

画像下に説明文が付くため、ギャラリーや記事本文に最適。

表示結果

３．画像形式の基礎知識

形式	拡張子	特徴	代表的な用途
GIF	.gif	256 色・アニメ対応	アイコン／ロゴ
JPEG	.jpg/.jpeg	写真向き・圧縮率高	カメラ画像
PNG	.png	透過・可逆圧縮	UI 素材
SVG	.svg	ベクタ・拡大劣化なし	アイコン／ロゴ
WebP	.webp	高圧縮・透過可	近年の汎用画像
AVIF	.avif	さらに高圧縮	次世代ブラウザ

４．高解像度・レスポンシブ対応

4.1. `srcset` と `sizes`

ファイル名： lesson16_4.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>写真を表示する</title>
</head>
<body>
  <h1>美しい夕焼け</h1>
  <img src="images/cat-320.jpg"
       srcset="images/cat-640.jpg 640w,
               images/cat-1280.jpg 1280w"
       sizes="(min-width: 600px) 50vw, 90vw"
       alt="のんびり昼寝中の猫">
</body>
</html>

表示結果

ブラウザが画面幅に応じて最適サイズの画像を自動選択。

4.2. `picture` 要素で形式を切り替え

ファイル名： lesson16_5.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>写真を表示する</title>
</head>
<body>
  <h1>美しい夕焼け</h1>
  <picture>
    <source type="image/avif" srcset="images/forest.avif">
    <source type="image/webp" srcset="images/forest.webp">
    <img src="images/forest.jpg" alt="森林の朝霧">
</picture>
</body>
</html>

表示結果

AVIF 非対応ブラウザには WebP、さらに非対応なら JPEG をフォールバック。

５．`<img>` タグと関連要素・属性一覧

タグ / 属性	意味・用途	備考
`<img>`	画像を埋め込む	終了タグなし
`src`	画像パス	必須
`alt`	代替テキスト	必須級
`width` / `height`	表示サイズ（px or %）	どちらか片方でも可
`title`	ツールチップ	補足説明
`srcset`	複数解像度指定	レスポンシブ
`sizes`	レイアウト幅ヒント	`srcset` と併用
`<figure>`	画像＋キャプション	ブロック要素
`<figcaption>`	画像説明文	`<figure>` 内で使用
`<picture>`	形式・解像度分岐	`<source>` と併用
`<source>`	`picture` の分岐条件	`type`／`media` 属性

まとめ

最小構成は <img src="…" alt="…">。alt はユーザビリティと SEO に不可欠。
width / height で固定サイズ、figure+figcaption でキャプション付き。
モバイル時代は srcset / picture で軽量かつ高解像度対応が鉄則。

　以上を踏まえれば、「画像が重い」「画質が荒い」「拡大するとボケる」といった課題をスマートに解決できます。

【6日でできるHTML＆CSS入門】画像の表示