pictureタグで、異なる画面幅に応じて異なる画像を表示する方法

スポンサーリンク

このコードは、HTMLの <picture> タグを使用して、異なる画面幅に応じて異なる画像を表示する方法を示しています。具体的には、幅が756ピクセル以下の場合に表示する画像と、それより大きい場合に表示する画像を切り替える設定がされています。

<picture> タグ

  • <picture> タグは、異なる条件に基づいて異なる画像を表示するためのHTML要素。このタグの中に複数の <source> タグを含め、最後にデフォルトの画像を表示する <img> タグを含めます。

<source> タグ

  • <source> タグは、特定の条件（メディア条件）に基づいて画像を選択するために使用される。この場合、メディア条件は画面の幅です。
  • srcset 属性は、表示する画像のURLを指定します。
  • media 属性は、画像を表示する条件を定義します。この場合、(max-width: 756px) は画面の幅が756ピクセル以下の場合に画像を表示することを意味します。

メリット

  • HTMLだけで完結する。CSS設定不要。
  • 画像が意味的にグループ化されるから、コードの可読性が向上する。
  • ブラウザが適切な画像を自動で選択するため効率的

デメリット

  • デザインと分離されていないため、大規模なプロジェクトでは管理が複雑になる可能性
スポンサーリンク

コメント