Day 4: 画像とメディア

今日学ぶこと

画像の埋め込みと最適化
レスポンシブ画像
音声と動画の埋め込み
iframe による外部コンテンツの表示

画像の基本

`<img>` 要素

画像を表示するには<img>要素を使います。空要素なので終了タグはありません。

<img src="photo.jpg" alt="写真の説明">

必須属性

属性	説明	重要度
`src`	画像のパス（URL）	必須
`alt`	代替テキスト	必須

オプション属性

属性	説明	例
`width`	幅（ピクセル）	`width="300"`
`height`	高さ（ピクセル）	`height="200"`
`loading`	遅延読み込み	`loading="lazy"`
`decoding`	デコード方式	`decoding="async"`

<img
    src="images/hero.jpg"
    alt="夕焼けの海岸線"
    width="800"
    height="600"
    loading="lazy"
>

重要: widthとheightを指定することで、画像読み込み前にブラウザがスペースを確保し、レイアウトのずれ（CLS）を防ぎます。

alt属性の重要性

alt属性はアクセシビリティの要です。

flowchart TB
    subgraph Alt["alt属性の役割"]
        A1["🔇 スクリーンリーダー<br>視覚障害者に内容を伝える"]
        A2["🖼️ 画像エラー時<br>代替テキストを表示"]
        A3["🔍 SEO<br>検索エンジンの理解を助ける"]
    end
    style A1 fill:#3b82f6,color:#fff
    style A2 fill:#f59e0b,color:#fff
    style A3 fill:#22c55e,color:#fff

alt属性の書き方

シーン	alt属性	例
意味のある画像	内容を説明	`alt="赤い帽子をかぶった猫"`
装飾的な画像	空のalt	`alt=""`
グラフ・図	データを説明	`alt="2025年の売上：前年比120%"`
ロゴ	会社名など	`alt="株式会社サンプル"`
リンク内画像	リンク先を説明	`alt="ホームへ戻る"`

<!-- ✅ 良い例 -->
<img src="cat.jpg" alt="窓辺で昼寝する茶色の猫">

<!-- ❌ 悪い例 -->
<img src="cat.jpg" alt="画像">
<img src="cat.jpg" alt="cat.jpg">
<img src="cat.jpg">  <!-- alt属性なし -->

画像フォーマット

フォーマット	拡張子	特徴	用途
JPEG	.jpg	写真向き、非可逆圧縮	写真、複雑な画像
PNG	.png	透過対応、可逆圧縮	ロゴ、スクリーンショット
GIF	.gif	アニメーション対応	簡単なアニメーション
SVG	.svg	ベクター形式、拡大劣化なし	アイコン、ロゴ
WebP	.webp	高圧縮、JPEGとPNGの代替	汎用（モダンブラウザ対応）
AVIF	.avif	最新の高圧縮フォーマット	汎用（対応ブラウザ拡大中）

`<figure>` と `<figcaption>`

画像にキャプション（説明文）をつけるには<figure>と<figcaption>を使います。

<figure>
    <img src="chart.png" alt="2025年の月別売上グラフ">
    <figcaption>図1: 2025年の月別売上推移</figcaption>
</figure>

ポイント: <figure>は画像だけでなく、コードブロック、引用、表など自己完結したコンテンツに使えます。

レスポンシブ画像

`<picture>` 要素

異なるデバイスや画面サイズに合わせて、最適な画像を表示できます。

<picture>
    <source media="(min-width: 800px)" srcset="hero-large.webp" type="image/webp">
    <source media="(min-width: 800px)" srcset="hero-large.jpg">
    <source srcset="hero-small.webp" type="image/webp">
    <img src="hero-small.jpg" alt="ヒーロー画像">
</picture>

flowchart TB
    subgraph Picture["&lt;picture&gt; による画像の出し分け"]
        PC["🖥️ デスクトップ<br>hero-large.webp"]
        Tablet["📱 タブレット<br>hero-medium.webp"]
        Mobile["📱 スマホ<br>hero-small.webp"]
    end
    style PC fill:#3b82f6,color:#fff
    style Tablet fill:#8b5cf6,color:#fff
    style Mobile fill:#22c55e,color:#fff

`srcset` と `sizes`

<img
    src="photo-400.jpg"
    srcset="photo-400.jpg 400w,
            photo-800.jpg 800w,
            photo-1200.jpg 1200w"
    sizes="(max-width: 600px) 100vw,
           (max-width: 1200px) 50vw,
           33vw"
    alt="レスポンシブ画像の例"
>

属性	説明
`srcset`	複数の画像とその幅を指定
`sizes`	表示条件ごとの画像サイズを指定

音声（`<audio>`）

<audio controls>
    <source src="music.mp3" type="audio/mpeg">
    <source src="music.ogg" type="audio/ogg">
    <p>お使いのブラウザは音声再生に対応していません。</p>
</audio>

audio の属性

属性	説明
`controls`	再生コントロールを表示
`autoplay`	自動再生（非推奨）
`loop`	ループ再生
`muted`	ミュート状態で開始
`preload`	`none` / `metadata` / `auto`

動画（`<video>`）

<video controls width="640" height="360">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <p>お使いのブラウザは動画再生に対応していません。</p>
</video>

video の属性

属性	説明
`controls`	再生コントロール
`poster`	再生前のサムネイル画像
`autoplay`	自動再生（muted必須）
`muted`	ミュート
`loop`	ループ
`playsinline`	インライン再生（iOS向け）

<video
    controls
    poster="thumbnail.jpg"
    width="640"
    height="360"
    preload="metadata"
>
    <source src="video.mp4" type="video/mp4">
</video>

iframe

外部コンテンツを埋め込むには<iframe>を使います。

<!-- YouTube動画 -->
<iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="動画のタイトル"
    allowfullscreen
></iframe>

<!-- Google Maps -->
<iframe
    src="https://www.google.com/maps/embed?pb=..."
    width="600"
    height="450"
    style="border:0;"
    allowfullscreen
    loading="lazy"
    title="地図"
></iframe>

セキュリティ: <iframe>のsandbox属性を使うと、埋め込みコンテンツの権限を制限できます。

実践: 写真ギャラリーページ

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>写真ギャラリー</title>
</head>
<body>
    <h1>写真ギャラリー</h1>

    <figure>
        <img src="images/sunset.jpg" alt="海に沈む夕日" width="600" height="400" loading="lazy">
        <figcaption>海に沈む夕日 — 2025年夏撮影</figcaption>
    </figure>

    <figure>
        <img src="images/mountain.jpg" alt="雪を被った山頂" width="600" height="400" loading="lazy">
        <figcaption>冬の富士山</figcaption>
    </figure>

    <h2>おすすめ動画</h2>
    <video controls poster="images/video-thumb.jpg" width="600">
        <source src="videos/travel.mp4" type="video/mp4">
        <p>お使いのブラウザは動画に対応していません。</p>
    </video>
</body>
</html>

まとめ

概念	説明
`<img>`	画像の埋め込み
`alt`	代替テキスト（必須）
`<figure>` / `<figcaption>`	画像とキャプションのセット
`<picture>`	レスポンシブ画像
`<audio>`	音声の埋め込み
`<video>`	動画の埋め込み
`<iframe>`	外部コンテンツの埋め込み

重要ポイント

alt属性は必ず記述する（アクセシビリティとSEO）
width/heightを指定してレイアウトシフトを防ぐ
WebP/AVIFなどモダンなフォーマットを活用する
loading="lazy"で遅延読み込みを活用する

練習問題

問題1: 基本

3枚以上の画像を含むギャラリーページを作成してください。各画像に<figure>と<figcaption>をつけましょう。

問題2: 応用

<picture>要素を使い、画面サイズによって異なる画像を表示するページを作成してください。

チャレンジ問題

YouTube動画を<iframe>で埋め込み、その上下に説明テキストを配置したページを作成してください。

参考リンク

次回予告: Day 5では「リストとテーブル」について学びます。データを整理して表示する方法をマスターしましょう。