picture

タグの概要

pictureタグは、画像とその代替テキストをマークアップするためのタグです。レスポンシブWebデザインで画像の適切な表示をサポートし、アクセシビリティを向上させるのに役立ちます。

複数の画像を異なる解像度で提供する場合に使用されます。

基本の書き方（構文）

<picture>
  <source srcset="画像ファイルパス" media="メディア条件">
  <img src="代替画像ファイルパス" alt="代替テキスト">
</picture>

主な属性とその説明

pictureタグには特定の属性はありませんが、sourceタグには以下の属性があります：

• srcset: 画像のファイルパスと解像度を指定します。
• media: メディア条件を指定し、条件が一致する場合にのみ画像を表示します。

使用例

<picture>
  <source srcset="img/photo-large.jpg" media="(min-width: 1024px)">
  <source srcset="img/photo-medium.jpg" media="(min-width: 768px)">
  <img src="img/photo-small.jpg" alt="写真">
</picture>

<picture>
  <source srcset="img/header-desktop.jpg" media="(min-width: 1024px)">
  <source srcset="img/header-tablet.jpg" media="(min-width: 768px)">
  <img src="img/header-mobile.jpg" alt="ヘッダー画像">
</picture>

よくある注意点・間違い

pictureタグを使用する際は、必ず代替テキストを提供し、画像の適切な解像度を指定することが重要です。また、media属性を誤って設定すると、画像が表示されない可能性があるため注意が必要です。