12月更新・前月(11月)の人気記事トップ10 12/07/2023
- ( 02 ↑) 【Mac】macOSをHigh SierraからMontereyにアップグレード
- ( 01 ↓) 【iPhone / iPad】iPhoneでSuicaをクレジットカード無しで使う方法
- ( 03 – ) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
- ( 05 ↑) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
- ( 06 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
- (圏外↑) 【jQuery】入門11. switch文による条件分岐
- (圏外↑) 【Mac】Safariでソースコードを見る方法
- ( 09 ↑) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法
- (圏外↑) 【jQuery】入門7. jQueryで新しいWindowを開く
- (圏外↑) 【iPhone iPad】iPhoneやiPadの音量を細かく調整する方法
【Labs】HTML5.1で追加されたpicture要素を使って画像を表示する
こんにちは(・∀・)
今日はHTML5.1で追加されたpicture要素を使って画像を表示する方法をご紹介します。
レスポンシブデザインの画像
以前【Labs】画像をレスポンシブデザインに対応させるで画像をユーザーの使用環境に合わせた大きさで表示するようにする方法をご紹介しました。
その方法であれば大きい画像が1枚あればどんな大きさに表示画面が変わっても画像をキレイに表示させることが可能です。
こんな感じ。
Result
サンプルデモはこちら
スマホでのご確認はこちらをどうぞ
しかしそれだと画面解像度の低い端末でも無駄に大きなサイズの画像を表示することになります。
見る側としてはいい迷惑です。
picture要素
そんな時はHTML5.1から追加されたpicture要素を使えば解決です。
大きさの違う同じ画像をいくつか作ってサーバーにアップするだけ。
あとはpicture要素とsource要素、img要素でHTMLに組み込みます。
<picture>
<source media="(min-width: 1200px)" srcset="img-1920x1440.jpg">
<source media="(min-width: 960px)" srcset="img-1024x768.jpg">
<source media="(min-width: 835px)" srcset="img-800x600.jpg">
<source media="(min-width: 361px)" srcset="img-480x360.jpg">
<img src="image-3.jpg" alt="サンプル画像">
</picture>
Result
サンプルデモはこちら
スマホでのご確認はこちらをどうぞ
picture要素がコンテナとなり、source要素でレスポンシブ画像を表示します。
レスポンシブ画像表示に当てはまらない場合はimg要素で画像を表示させます。
source要素の後ろにimg要素が来るように配置します。
詳しくは【HTMLリファレンス】picture要素で。