HTML5から追加されたpictureタグを使うと、画面サイズによって表示する画像を簡単に切り替えることができる。
CSSやJSが不要でHTMLのみで実現できる。
使い方
.html
<picture>
<source media="(メディア属性の値)" srcset="画像パス">
<img src="画像パス" alt="" />
</picture>
- 使うタグは
picture、source、imgの３つ。 - メディア属性の条件に適合する場合は
srcsetで指定した画像が表示される。 - どの条件にも当てはまらない場合はimgが適用される。
▼ポイント
- viewportの記述必須。
-
source属性は複数記述可能。 -
source属性を記述する順番は重要。上から順にメディア属性の条件が照らし合わされる。 - どの条件にも当てはまらない場合はimgタグが適用。
viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
メディア属性の使い方
メディアクエリを属性に適用したもの。メディア属性が使えるのは次の５つのタグ：a, area, link, style, source。
media="screen and (適用条件:画面幅)"
▼適用条件
| 適用条件 | 概要 | 意味 |
|---|---|---|
| max-width | 以下 | 画面幅の最大値。小さい幅から、この値まで適用。 |
| min-width | 以上 | 画面幅の最少値。大きい幅から、この値まで適用。 |
maxは以下、minは以上。〜以上、〜以下としたい場合はそれぞれを組み合わせる。
(min-width: 360px) and (max-width: 680px)なら、360px~680pxの時に適用となる。
実例
<picture>
<source srcset="public/image/pic-pc.png" media="(min-width: 1080px)"/>
<source srcset="public/image/pic-tablet.png" media="(min-width: 680px)"/>
<source srcset="public/image/pic-sp.png" media="(min-width: 360px)"/>
<img src="public/image/pic.png" alt="" />
<picture>
- 1080px以上はpic-pc.pngを表示。
- 680px以上（~1079px）はpic-tablet.pngを表示。
- 360px以上（~659px）はpic-sp.pngを表示。
- 上記のどれにも当てはまらない場合（~359px）はpic.pngを表示。
以上。