HTMLでブラウザの大きさによって表示する画像を変更する

ヘッダ画像等をスマートフォン、タブレット、PC等で表示分けをしたい、というユースケースで使える技。

環境

• HTML

対応

sourceタグのmedia属性に目的の端末のウィンドウサイズを指定することで、端末ごとに画像を表示分けできます。

詳しいことは、MDN Web Docsに記載されていますので、そちらを参考にした方が詳しく勉強できます。

<picture>
  <source srcset="スマートフォン用画像"
          media="(max-width: 800px)">
  <source srcset="タブレット用画像"
          media="(min-width: 801px) and (max-width: 1000px)">
  <img src="PC用画像"/>
</picture>

終わりに

HTML, CSSの記事はある程度簡単に調べられていいですね。

なお、この機能ではなく、display: none等で非表示にする方法でも、表示画像を切り替えるという観点ではできると思います。

---

この記事お役に立ちましたら、各種SNSでのシェアや、今後も情報発信しますのでフォローよろしくお願いします。

• 技術ブログはこちら
• 雑記ブログはこちら

参考記事

• <source>: メディアまたは画像のソース要素 - HTML: HyperText Markup Language | MDN