このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.
havin' a coffee break

このページはHTMLタグ辞書のサンプルページです。
レスポンシブイメージpicture”要素の使い方について解説するためのサンプルページです。

ビューポートの横幅に応じて画像を出し分ける
<p>
<picture>
<source media="(max-width: 320px)" srcset="sample-320-sp.png">
<source media="(max-width: 640px)" srcset="sample-640.png">
<source media="(min-width: 640px)" srcset="sample-1280.png">
<img src="sample-640.png" alt="サンプル画像">
</picture>
</p>
ビューポートの横幅に応じて画像を出し分ける

サンプル画像

(C) 2015 havin' a coffee break