ヘッダ画像等をスマートフォン、タブレット、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でのシェアや、今後も情報発信しますのでフォローよろしくお願いします。
参考記事
