Skip to content

9. 画像：imgタグ

imgタグで画像を表示でき、srcで場所、altで代替テキストを指定して「伝わる画像」にできます。

•beginnerimgsrcaltfigureaccessibility
目次
まず結論（1行）
最小の書き方（コピペで動く最小コード）
重要ポイント（初心者が迷う所だけ）
例で理解（よく使うパターン：5つ）
1) 同じフォルダの画像2) imagesフォルダの画像（相対パス）3) 外部URLの画像（学習用。実務は管理に注意）4) キャプション付き（説明込みで伝える）5) クリックできる画像（リンクとして使う）
使い分け（似た要素との違い）
実務のコツ（SEO・安全・アクセシビリティ）
NG・禁止例（なぜダメ？どう直す？）
1) altが空/ない（情報画像で）2) ファイル名そのまま（意味が伝わらない）3) サイズ固定でスマホで崩れる4) 装飾画像なのに長いalt（読み上げがうるさい）
見た目を整える（HTML+CSSセット：4例）
例1：はみ出し防止（超定番）例2：角丸＋影で“写真っぽく”例3：キャプション付きレイアウト（figure）例4：画像リンクを押しやすく（a + img）
理解チェック（3問・答え付き）
ミニ演習（すぐ試せる小課題）

まず結論（1行）

imgタグで画像を表示でき、srcで場所、altで代替テキストを指定して「伝わる画像」にできます。

最小の書き方（コピペで動く最小コード）

HTMLCode
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>imgの基本</title>
  </head>
  <body>
    <h1>画像を表示する</h1>

    <img src="photo.jpg" alt="海辺の風景写真" />
  </body>
</html>
Preview を表示

※ photo.jpg は同じフォルダに置いた想定（なければ自分の画像名に合わせて変更）

重要ポイント（初心者が迷う所だけ）

  • imgは閉じタグがない要素：<img ... /> だけで完結（中身を持たない）。
  • 画像の場所は src（パス/URL）。
  • alt は必須級：画像が表示できないとき・読み上げ・検索エンジンに内容を伝える。
  • 画像はそのままだとはみ出すことがある → CSSで max-width: 100% が定番。
  • 画像の周辺説明が必要なら figure / figcaption を使うと意味が明確。

例で理解（よく使うパターン：5つ）

1) 同じフォルダの画像

HTMLCode
<img src="logo.png" alt="サイトのロゴ" />
Preview を表示

2) imagesフォルダの画像（相対パス）

HTMLCode
<img src="./images/profile.jpg" alt="プロフィール写真" />
Preview を表示

3) 外部URLの画像（学習用。実務は管理に注意）

HTMLCode
<img src="https://example.com/banner.jpg" alt="キャンペーンバナー" />
Preview を表示

4) キャプション付き（説明込みで伝える）

HTMLCode
<figure>
  <img src="chart.png" alt="売上推移の折れ線グラフ" />
  <figcaption>2025年の月別売上推移</figcaption>
</figure>
Preview を表示

5) クリックできる画像（リンクとして使う）

HTMLCode
<a href="/index.html">
  <img src="logo.png" alt="トップページへ戻る" />
</a>
Preview を表示

使い分け（似た要素との違い）

  • img：画像ファイルを埋め込む
  • background-image（CSS背景）：装飾目的に向く（内容として重要ならimgが基本）
  • figure/figcaption：画像に説明や出典を付けたいときに使う

実務のコツ（SEO・安全・アクセシビリティ）

  • altは“何が写っているか”を短く：装飾ではなく情報がある画像ほど重要。
  • ロゴのaltは用途で変わる：
    • ロゴ単体表示 → alt="サイト名" が分かりやすい
    • すでにサイト名が近くに文字であるなら短くてもOK
  • 画像の説明が長くなるなら、本文やfigcaptionに分ける（altは長文にしすぎない）

NG・禁止例（なぜダメ？どう直す？）

1) altが空/ない（情報画像で）

HTMLCode
<img src="chart.png" />
Preview を表示

→ ✅ altを書く：alt="売上推移のグラフ"

2) ファイル名そのまま（意味が伝わらない）

HTMLCode
<img src="img_2384.png" alt="img_2384" />
Preview を表示

→ ✅ 内容を書く：alt="店内の様子"

3) サイズ固定でスマホで崩れる

HTMLCode
<img src="photo.jpg" alt="写真" width="1200" />
Preview を表示

→ ✅ CSSで可変に：max-width: 100%; height: auto;

4) 装飾画像なのに長いalt（読み上げがうるさい）

HTMLCode
<img src="line.svg" alt="ここに長い説明..." />
Preview を表示

→ ✅ 装飾なら alt=""（空）にして読み上げ対象から外す（※“装飾”に限る）

見た目を整える（HTML+CSSセット：4例）

例1：はみ出し防止（超定番）

例1：はみ出し防止（超定番）

HTMLCode
<img class="img" src="photo.jpg" alt="海辺の風景写真" />
CSSCode
.img {
max-width: 100%;
height: auto;
display: block;
}
Preview を表示

例2：角丸＋影で“写真っぽく”

例2：角丸＋影で“写真っぽく”

HTMLCode
<img class="photo" src="profile.jpg" alt="プロフィール写真" />
CSSCode
.photo {
max-width: 100%;
height: auto;
display: block;
border-radius: 18px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
}
Preview を表示

例3：キャプション付きレイアウト（figure）

例3：キャプション付きレイアウト（figure）

HTMLCode
<figure class="figure">
<img class="figure__img" src="chart.png" alt="売上推移の折れ線グラフ" />
<figcaption class="figure__cap">2025年の月別売上推移</figcaption>
</figure>
CSSCode
.figure {
margin: 0;
display: grid;
gap: 10px;
}

.figure__img {
max-width: 100%;
height: auto;
display: block;
border-radius: 16px;
border: 1px solid currentColor;
}

.figure__cap {
opacity: 0.8;
font-size: 0.95rem;
}
Preview を表示

例4：画像リンクを押しやすく（a + img）

例4：画像リンクを押しやすく（a + img）

HTMLCode
<a class="logoLink" href="/index.html">
<img class="logoLink__img" src="logo.png" alt="トップページへ戻る" />
</a>
CSSCode
.logoLink {
display: inline-block;
padding: 10px;
border-radius: 14px;
}

.logoLink:hover {
opacity: 0.85;
}

.logoLink__img {
display: block;
height: 40px;
width: auto;
}
Preview を表示

理解チェック（3問・答え付き）

Q. 画像ファイルの場所を指定する属性は？

A. src。

Q. 画像が表示できないときに代わりに伝えるのは？

A. alt（代替テキスト）。

Q. 画像がスマホで横にはみ出すときの定番CSSは？

A. max-width: 100%; height: auto;。

ミニ演習（すぐ試せる小課題）

  1. 自分の好きな画像を1枚用意して、imgで表示してみよう。altは「何の画像か」が伝わる短文にする。
  2. figure + figcaptionで「画像＋一言説明」を作り、CSS例3で見た目を整えてみよう。