[html]pictureタグはめっちゃ使える

他の記事でちょいちょい書いてるけど探しやすくするために書く。

使用例

<picture>
    <source srcset="https://placehold.jp/800x1200.png" media="(max-width: 800px)">
    <img src="https://placehold.jp/980x560.png" alt="" />
</picture>

用途

幅指定ができるからレスポンシブデザインで組む際の画像切り替えをhtml上で作れる。

PC/SPの切り替えをできるようになるのってほんと素晴らしい。

これまではcss上でbackground-imageの切り替えで対処してた。WPとか管理画面上で画像差し替えをする場合、cssファイルに干渉はできないんでhtml上に<style>を用意してそこに挿入する必要があった。もしくはjsでパスを変更するとかしてた。なかなかめんどくさかったんで、本当に楽になった。みんな使おう。

詳細・応用・注意点など

: 画像要素 - HTML: HyperText Markup Language | MDN
HTML の 要素は、0個以上の 要素と一つの 要素を含み、様々な画面や端末の条件に応じた画像を提供します。
なんでもかんでもpicture要素を使えばいいわけじゃない!レスポンシブ・イメージ実装の際の注意点
画像表示のマルチデバイス対応をHTMLとCSSのみで実現できる「レスポンシブ・イメージ」ですが、効果的な使い方をするには、いくつか注意点があります。プロダクション・サイトで使えるようになるまでにはもう少し時間がかかりそう
pictureタグで画像をレスポンシブに切り替える - HTMLリファレンス
HTMLのpictureタグを使えば、画像をレスポンシブに切り替えることができます。画面幅に応じて別の画像を表示したり、WebP未対応ブラウザでは別の画像を表示したりすることが可能になります。

コメント

タイトルとURLをコピーしました