Webページに画像を表示するのって、どうやるんですか？
画像を表示するには<img>タグを使うんだ。でも、ただ表示するだけじゃなくて、アクセシビリティも考えて適切に実装することが大切なんだよ。
アクセシビリティって何ですか？画像と関係があるんですか？
アクセシビリティとは、すべての人がWebページを利用できるようにすることだよ。例えば視覚に障害のある人は画像が見えないから、代替テキストで画像の内容を説明する必要があるんだ。今日はそんな大切なポイントも含めて学んでいこう。
imgタグの基本構造
HTMLで画像を表示するには<img>タグを使用します。imgタグは閉じタグが不要な「空要素」で、属性によって画像の詳細を指定します。XHTMLスタイルでは<img />のようにスラッシュで終わります。
（相対パス・絶対パス）
（アクセシビリティ対応）
（CLS防止・レスポンシブ対応）
スラッシュで終了
基本的な画像の表示
最もシンプルな画像の表示方法を見てみましょう。
src属性の値を削除したり、存在しないパスを指定すると、ブラウザは画像を表示できず、代わりにalt属性のテキストが表示されます。エディターでsrcやaltを変更して、表示の違いを確認してみてください。
src属性 - 画像ファイルの指定
src属性は画像ファイルの場所を指定する最重要の属性です。ファイルの場所を指定する方法（パス）には、相対パス・ルートパス・絶対パスの3種類があります。
または
<img src="../images/photo.jpg" alt="写真" />
パスの種類と使い分け
画像ファイルの指定方法には3つのパターンがあり、それぞれ適切な使用場面があります。
- 相対パス
images/photo.jpg- 現在のHTMLファイルから見た位置を指定 - ルートパス
/images/photo.jpg- サイトのルートディレクトリーから見た位置を指定 - 絶対パス
https://example.com/photo.jpg- 完全なURLで指定
パスの種類と使い分けについては、「パスとURLの理解」のレッスンで詳しく解説しています。各パスの詳細な特徴や実践的な使用例を学ぶことができます。
alt属性 - 代替テキストの重要性
alt属性は画像の内容を文字で説明する代替テキストです。アクセシビリティの観点から非常に重要な属性です。
良いalt属性の書き方
- 具体的で簡潔 画像の内容を的確に説明する
- 文脈を考慮 ページの内容と関連性を持たせる
- 装飾画像 内容的に意味がない場合は必ず
alt=""を指定 - 冗長な表現を避ける 「画像」「写真」などの言葉は不要
<!-- 良い例 -->
<img src="sunset.jpg" alt="海に沈む夕日" />
<img src="graph.png" alt="2023年売上推移グラフ" />
<!-- 避けるべき例 -->
<img src="sunset.jpg" alt="夕日の画像" />
<img src="graph.png" alt="画像" />
<!-- 装飾的な画像（必ずalt=""を記述） -->
<img src="decoration.png" alt="" />装飾画像にalt=""を設定する理由は、スクリーンリーダーに「この画像は装飾目的なのでスキップして」と明確に伝えるためです。
- alt属性なし スクリーンリーダーがファイル名を読み上げてしまう
- alt="" スクリーンリーダーが画像を無視する（正しい動作）
- 意図の明確化 開発者が装飾目的であることを明示できる
width・height属性 - アスペクト比の指定
width属性とheight属性は、画像のアスペクト比（縦横比）をブラウザに事前に伝える重要な役割を持ちます。現代のWeb開発では、HTML属性とCSSの協調により、レイアウトシフトのない快適なページを作成することが推奨されています。
- ブラウザに縦横比を伝える
- 画像読み込み前にスペース確保
- レイアウトシフト（CLS）を防止
- レスポンシブ対応
- 実際の表示サイズ調整
- デザインに応じた配置
width・height属性で画像のアスペクト比（縦横比）をブラウザに伝えることで、ブラウザは画像読み込み前に適切なスペースを確保できます。
これにより、画像が読み込まれた時にレイアウトがガタつく「レイアウトシフト（CLS）」を防止でき、ユーザーエクスペリエンスが大幅に向上します。
アスペクト比って何ですか？難しそうな言葉ですね。
アスペクト比というのは「縦と横の比率」のことだよ。例えば、横300ピクセル、縦200ピクセルの画像なら、「300:200」つまり「3:2」の比率になるんだ。
比率が大切な理由は何ですか？
比率が違うと画像が歪んでしまうんだ。人の顔が細長くなったり、横に潰れたりしてしまうよ。HTMLで正しいサイズを最初に教えておくと、レイアウトが安定するんだ。
実装例：HTML属性とCSSファイルの協調
以下、HTML属性とCSSを組み合わせた実装例を見てみましょう。これにより、画像のアスペクト比を維持しつつ、レスポンシブ対応も可能になります。
ここで出てくるCSSコードは、画像をレスポンシブに表示するための重要な設定です。CSSの詳細については「CSSの基礎」のカテゴリで学習できますが、今は「このようなコードを書くと画像がレスポンシブになる」という理解で十分です。
/* CSSファイルに記述 */
img {
max-width: 100%;
height: auto;
}<!-- 現代の推奨実装 -->
<img src="photo.jpg" alt="写真の説明" width="300" height="200" />- 元画像の実寸に合わせる width・heightは画像の実際のピクセル数と一致させる
- 片方のみでも効果あり widthまたはheightのどちらか一方でもCLS防止に有効
- CSSとの組み合わせ
max-width: 100%; height: auto;でレスポンシブ対応 - レイアウトシフトの体感 悪い例と比較することで効果を実感できる
正しい実装と間違った実装の比較
実際にHTML属性とCSSがどのように協調して動作するかを、具体例で確認してみましょう。正しい実装と間違った実装を比較することで、width・height属性の重要性を体感できます。
HTML属性で正確なアスペクト比を指定し、CSSで max-width: 100%; height: auto; を設定する方法です。
CSSの「max-width: 100%; height: auto;」を削除すると、画像が400pxの固定サイズになり、レスポンシブ対応(画面サイズに応じた自動調整)ができなくなります。試しにCSSを削除して確認してみてください。
この方法の効果:
- レスポンシブ対応 画面サイズに応じて自動調整
- アスペクト比維持 正確なwidth・heightで歪みを防止
- レイアウトシフト防止 画像読み込み前にスペースを確保
HTML属性で間違ったサイズを指定すると、画像が歪んでしまいます。
この方法の問題点:
- レスポンシブ対応ができない 画面サイズに応じた自動調整が不可能
- 画像が不自然に歪む アスペクト比が崩れる
- プロ品質の欠如 画像がぼやけたり、潰れたりする
良い例と悪い例を比較すると、画像が歪む問題がよく分かりますね！
そうなんだ！実際に比較してみると、HTML属性でアスペクト比を正確に指定することの重要性がよく分かるでしょう？これで画像が自然に表示されるようになるよ。
なるほど～。あと画像ファイルの形式って、JPEGとかPNGとかありますよね？どれを使えばいいんですか？
画像形式によって特徴が違うから、用途に応じて選ぶことが大切なんだ。次はその使い分けを見てみよう。
画像形式の使い分け
Web上で使用される主要な画像形式とその特徴を理解しておきましょう。
- 適用場面 写真、風景画像、グラデーションの多い画像
- メリット ファイルサイズを効率的に圧縮できる
- 注意点 透明背景は不可、圧縮により画質が劣化する可能性
<img src="photo.jpg" alt="風景写真" />- 適用場面 ロゴ、アイコン、透明背景が必要な画像、鮮明な線画・イラスト
- メリット 透明背景をサポート、画質劣化がない
- 注意点 ファイルサイズが大きくなりがち
<img src="logo.png" alt="会社ロゴ" />- 適用場面 高品質で軽量な画像、モダンブラウザー対応サイト、パフォーマンス重視
- メリット JPEGより小さく、PNGの透明度もサポート
- 注意点 古いブラウザーでは対応していない
<img src="modern.webp" alt="最新画像" />- 適用場面 アイコン、ロゴ、どんなサイズでも鮮明、アニメーション可能
- メリット 拡大縮小しても画質が劣化しない、軽量
- 注意点 複雑な画像は不向き
<img src="icon.svg" alt="メニューアイコン" />よくある間違いと対策
初心者がよく陥る画像表示の問題と、その解決方法を確認しておきましょう。
- パスの間違い フォルダー名やファイル名のスペルミスに注意
- 大文字小文字の違い
Photo.jpgとphoto.jpgは別ファイルとして扱われる - alt属性の省略 アクセシビリティの観点から必ず設定する
- 過度に大きな画像 読み込み速度に影響するため、適切なサイズを選ぶ
<!-- よくある間違い -->
<img src="Photo/sunset.JPG"> <!-- パスやalt属性の問題 -->
<!-- 正しい書き方 -->
<img src="photos/sunset.jpg" alt="海に沈む美しい夕日" />理解度チェッククイズ
さあ、ここまでの内容を振り返るクイズを用意したよ。自分の理解度を確認してみよう！
画像表示ミニクイズ
まとめ
画像の表示って、ただsrc属性を書くだけじゃなくて、いろいろ考えることがあるんですね。
そうなんだ。特にalt属性は忘れがちだけど、Webサイトを誰でも使えるようにするために本当に大切なんだよ。
画像形式も用途によって使い分けるのが重要なんですね。写真はJPEG、ロゴはPNGって覚えておきます！
width・height属性でアスペクト比を指定すると、レイアウトシフトを防げるんですね。現代のWeb開発って奥が深いです！
そうなんだよ！今日学んだことをまとめると、画像を適切に実装するには技術的な知識だけでなく、アクセシビリティやユーザーエクスペリエンスも考慮することが大切なんだ。これで、見た目も美しく、誰でも使いやすいWebサイトが作れるようになるよ。
- imgタグの基本 空要素で閉じタグは不要、属性で画像の詳細を指定
- src属性 相対パス・ルートパス・絶対パスを適切に使い分け
- alt属性 アクセシビリティ対応のため必須、装飾画像では空文字を設定
- width・height属性 アスペクト比をブラウザに伝えてCLS（レイアウトシフト）を防止
- 画像形式の選択 JPEG（写真）、PNG（ロゴ・透明背景）、WebP（高性能）、SVG（ベクター）
- アクセシビリティ スクリーンリーダー対応、SEO効果も考慮した包括的な実装
次回は、学んだリンクと画像の知識を統合して、複数ページで構成された実践的なWebサイトを作成していきます。