0Pricing
HTML Academy · レッスン

アートディレクションのためのpicture要素

ビューポートの条件に応じて画像全体を切り替えます。

「アートディレクションのためのpicture要素」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。

アートディレクションの問題

アートディレクションとは、画面サイズに応じて、基本的に異なる画像の切り抜きや構図を提供することです：

  • デスクトップでは横長の写真全体
  • モバイルでは拡大した縦長の切り抜き
  • これはsrcsetとsizesだけでは解決できません

picture要素

<picture>要素は、複数の<source>要素とフォールバック用の<img>要素を内包します：

<picture>
  <source media="(min-width: 800px)" srcset="wide-crop.jpg">
  <source media="(min-width: 500px)" srcset="medium-crop.jpg">
  <img src="narrow-crop.jpg" alt="Team photo">
</picture>
<!-- Browser picks the first matching source -->
<!-- img is required as fallback and carries the alt attribute -->

pictureの仕組み

ブラウザーは<source>要素を上から順番に評価します：

  1. 最初のsourceのmedia条件を確認し、一致すればその画像を使用します
  2. 2番目のsourceを確認し、一致すればその画像を使用します
  3. どれも一致しなければ、デフォルトとして<img>にフォールスルーします

<img>要素が選択された画像を表示し、altテキストを保持します。

pictureによるフォーマットの切り替え

<picture>では、ブラウザーの対応状況に基づいて画像フォーマットを選択することもできます：

<picture>
  <!-- AVIF: best compression, newest support -->
  <source type="image/avif" srcset="photo.avif">
  <!-- WebP: great compression, wide support -->
  <source type="image/webp" srcset="photo.webp">
  <!-- JPEG: universal fallback -->
  <img src="photo.jpg" alt="Mountain photo">
</picture>
<!-- Browser picks the first format it supports -->

アートディレクションとフォーマットの組み合わせ

メディア条件とフォーマット選択を組み合わせることができます：

<picture>
  <source
    media="(min-width: 800px)"
    type="image/webp"
    srcset="hero-wide.webp"
  >
  <source
    media="(min-width: 800px)"
    srcset="hero-wide.jpg"
  >
  <source type="image/webp" srcset="hero-mobile.webp">
  <img src="hero-mobile.jpg" alt="Hero image" width="1200" height="600">
</picture>

img要素は必須

<picture>内の<img>要素は省略できません：

  • 選択された画像を表示します
  • アクセシビリティのためのaltテキストを保持します
  • width、height、loadingなどの属性を保持します
  • これがないと何も表示されません

sourceのmedia属性

media属性には、標準のCSSメディアクエリを指定できます：

<picture>
  <source media="(orientation: landscape)" srcset="landscape.jpg">
  <source media="(orientation: portrait)" srcset="portrait.jpg">
  <img src="portrait.jpg" alt="Scene">
</picture>

<!-- Other media features work too: -->
<!-- (prefers-color-scheme: dark) -->
<!-- (min-resolution: 2dppx) -->
<!-- (max-width: 600px) -->

sourceのsrcsetによるレスポンシブな選択

アートディレクションとsrcsetを組み合わせることで、完全に制御できます：

<picture>
  <!-- Desktop: wide hero, multiple resolutions -->
  <source
    media="(min-width: 1024px)"
    srcset="hero-1024.jpg 1024w, hero-2048.jpg 2048w"
    sizes="100vw"
  >
  <!-- Mobile: portrait crop -->
  <img
    srcset="hero-mobile-400.jpg 400w, hero-mobile-800.jpg 800w"
    sizes="100vw"
    src="hero-mobile-400.jpg"
    alt="Conference keynote speaker on stage"
  >
</picture>

ダークモード用の画像

ダークモードを利用するユーザーには、別の画像を提供できます：

<picture>
  <source
    media="(prefers-color-scheme: dark)"
    srcset="logo-dark.svg"
  >
  <img src="logo-light.svg" alt="Company logo" width="120" height="40">
</picture>
<!-- Users with dark mode OS setting see logo-dark.svg -->
<!-- Everyone else sees logo-light.svg -->

pictureとCSS background-imageの比較

<picture>とCSSの背景を使い分ける場面：

  • コンテンツ画像 — <picture>を使用します：altテキストが必要で、文書のコンテンツの一部になる画像
  • 装飾画像 — メディアクエリとCSSのbackground-imageを使用します
  • SEOで重要な画像 — 常に<picture>を使用します：クローラーはimg要素をインデックスに登録します

アクセシビリティに関する注意

alt属性は必ず<source>ではなく<img>に指定します：

<picture>
  <source srcset="photo.webp" type="image/webp">
  <!-- alt goes on img, not source: -->
  <img src="photo.jpg" alt="Sunset over the Pacific Ocean">
</picture>
<!-- screen readers read img's alt, whichever source was selected -->

pictureでの遅延読み込み

<picture>内の<img>に遅延読み込みを追加します：

<picture>
  <source srcset="photo.webp" type="image/webp">
  <img
    src="photo.jpg"
    alt="Gallery photo"
    loading="lazy"
    width="800"
    height="600"
  >
</picture>

クイックチェック

pictureブロック内で必ず存在し、alt属性を持つ必要がある要素はどれですか？

まとめ：picture要素

pictureによるアートディレクション：

  • <picture>は<source>要素と<img>要素を内包します
  • ブラウザーは最初に一致した<source>を選択します
  • ビューポートの条件にはmediaを、フォーマットの選択にはtypeを使用します
  • <img>は必須です — 画像を表示し、altテキストを保持します
  • srcsetとsizesを組み合わせることで、レスポンシブ表示を完全に制御できます

よくある質問

「アートディレクションのためのpicture要素」レッスンは無料ですか？

はい。「アートディレクションのためのpicture要素」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。

「アートディレクションのためのpicture要素」で何を学びますか？

ビューポートの条件に応じて画像全体を切り替えます。 ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「アートディレクションのためのpicture要素」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML Academyレッスンでコードを書いて実行できますか？

はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. img要素：src、alt、width、height
  2. srcsetとsizesによるレスポンシブ画像
  3. アートディレクションのためのpicture要素
  4. figureとfigcaption
← HTML Academyに戻る