JavaScript | HTML / CSS 連携：テキスト・リンク・画像 － imgタグ

JavaScript JavaScript
スポンサーリンク

img タグは「ページに画像を埋め込むためのタグ」

<img> タグは、
「この場所に、この画像ファイルを表示して」
とブラウザに伝えるためのタグです。

テキストが <p> や <h1> なら、
画像は <img> が担当、というイメージです。

ただし、<img> は
開始タグと終了タグのペアではなく、
「単体で完結するタグ」 です。

<img src="cat.jpg" alt="椅子の上で寝ている白い猫">

これ 1 行で「画像の表示」が完結します。

img タグの必須コンビ：src と alt

src 属性は「画像ファイルの場所」

src は source（ソース） の略で、
「どの画像ファイルを表示するか」を指定します。

<img src="images/cafe.jpg" alt="店内のカフェの写真">

src に書くのは、
画像ファイルへのパス（URL）です。

同じフォルダなら cat.jpg
一つ上の階層なら ../cat.jpg
別サイトなら https://example.com/cat.jpg

というように書きます。

ここが間違っていると、
画像は表示されず「バツ印」や何もない状態になります。

alt 属性は「画像が見えないときの代わりのテキスト」

alt は alternative text（代替テキスト） の略で、
「画像が表示できないとき・見えない人のための説明文」 です。

<img src="cat.jpg" alt="椅子の上で丸くなって寝ている白い猫">

この alt は、次のような場面で使われます。

画像が読み込めなかったときに代わりに表示される
スクリーンリーダーが alt を読み上げる
検索エンジンが画像の内容を理解する手がかりにする

つまり、
alt は「この画像は何なのか？」を言葉で説明する場所 です。

装飾目的の、意味のない画像（ただの線や背景など）の場合は、
alt=""（空文字）にして
「読み上げなくていい画像ですよ」と伝えることもあります。

img タグの基本例をいくつか見てみる

シンプルな画像表示

<p>うちの猫です。</p>
<img src="cat.jpg" alt="椅子の上で寝ている白い猫">

これは一番基本的な形です。

画像をリンクにする

<a href="/gallery">
  <img src="thumb.jpg" alt="ギャラリーページへのサムネイル画像">
</a>

画像全体がクリックできるリンクになります。

ここでも alt は
「この画像が何のリンクなのか」を説明するように書きます。

width / height 属性と CSS の役割分担

HTML の width / height は「元のサイズの目安」

<img src="cat.jpg" alt="椅子の上で寝ている白い猫" width="400" height="300">

width と height は、
画像の表示サイズ（ピクセル）を指定します。

ただし、最近は
レイアウトの調整は CSS に任せる ことが多いです。

HTML では「元の比率」を保つために
width / height を入れておき、
実際の表示サイズは CSS で変える、というやり方がよく使われます。

CSS でレスポンシブにする

<img src="cat.jpg" alt="椅子の上で寝ている白い猫" class="photo">

.photo {
  max-width: 100%;
  height: auto;
  display: block;
}

こうすると、
画像は「親要素の幅を超えない範囲で縮む」ようになり、
スマホでもはみ出さずに表示できます。

max-width: 100% と height: auto のセットは
「レスポンシブ画像の基本パターン」 として覚えておくと便利です。

画像の意味と alt の書き方をもう少し深掘りする

「この画像は何のためにある？」から考える

alt を書くときは、
まず自分にこう問いかけてください。

「この画像は、ユーザーに何を伝えたい？」
「この画像が見えない人に、何を言葉で伝えるべき？」

例えば：

商品写真 → 商品名や特徴を簡潔に
人物写真 → 誰なのか、何をしているのか
グラフ → グラフが伝えたい結論を一文で

例：商品画像

<img src="coffee-beans.jpg" alt="中深煎りのコーヒー豆 200g のパッケージ">

例：装飾だけの線（意味なし）

<img src="line.png" alt="">

この場合は、
「意味のない装飾なので、スクリーンリーダーには読み上げなくていい」
という意図で alt を空にします。

JavaScript と img：動的に画像を切り替える

src を書き換えて画像を変える

HTML：

<img id="mainPhoto" src="photo1.jpg" alt="ギャラリーの写真 1">
<button id="nextBtn">次の写真</button>

JavaScript：

const mainPhoto = document.querySelector("#mainPhoto");
const nextBtn = document.querySelector("#nextBtn");

const photos = [
  { src: "photo1.jpg", alt: "ギャラリーの写真 1" },
  { src: "photo2.jpg", alt: "ギャラリーの写真 2" },
  { src: "photo3.jpg", alt: "ギャラリーの写真 3" },
];

let index = 0;

nextBtn.addEventListener("click", () => {
  index = (index + 1) % photos.length;
  mainPhoto.src = photos[index].src;
  mainPhoto.alt = photos[index].alt;
});
JavaScript

ここで重要なのは、
src だけでなく alt も一緒に更新している ことです。

見た目の画像が変わるなら、
「その画像が何か」という説明も変えるべきだからです。

パフォーマンスの観点：loading=”lazy” で遅延読み込み

画面外の画像は後から読み込む

画像が多いページでは、
すべての画像を最初から読み込むと
表示が重くなります。

そこで使えるのが loading="lazy" 属性です。

<img src="photo1.jpg" alt="写真 1" loading="lazy">
<img src="photo2.jpg" alt="写真 2" loading="lazy">
<img src="photo3.jpg" alt="写真 3" loading="lazy">

loading="lazy" を付けると、
「その画像が画面に近づいてきたタイミングで読み込む」
という動きになります。

これにより、
初回表示が速くなり、
ユーザー体験もパフォーマンスも良くなります。

よくある“やりがちミス”と直し方

alt を空欄のまま放置する

悪い例：

<img src="cat.jpg">

alt がないと、
スクリーンリーダーはファイル名を読み上げたり、
ユーザーにとって意味のない情報になってしまいます。

最低限、
「この画像が何か」を一文で書く癖をつけましょう。

画像の中の文字を alt に丸ごと書かない

画像の中に「セール開催中！今だけ 50% OFF」
と書いてあるからといって、
それを alt にそのまま全部入れると
うるさくなりすぎることがあります。

本当に伝えたい情報は何か？
を考えて、短くまとめるのがコツです。

初心者として「img タグ」で絶対に掴んでほしいこと

<img> は、
「画像ファイルをページに埋め込むタグ」 です。

src で「どの画像か」を指定する
alt で「その画像が何か」を言葉で説明する
レイアウトやサイズ調整は CSS と組み合わせて行う
JavaScript で src を変えるときは、alt も一緒に更新する
loading="lazy" で画面外の画像を遅延読み込みできる

あなたが <img> を書くときに、
「この画像は何を伝えたい？ それを alt でどう言葉にする？」
と一度考えられるようになったら、
もう img タグを“ただの飾り”ではなく、
“意味と情報を持ったコンテンツ”として扱えている状態です。

スポンサーリンク
タイトルとURLをコピーしました