HTML5.1 新要素＜picture＞が便利！！

HTML5.1から新要素としてpictureタグが追加されました。

pictureタグは画像をマルチデバイス対応させる時にとても便利なので使い方をおさらいしていきたいと思います。

まず、今までは画像をマルチデバイス対応させるときは画像をmax-width:100%やCSSへメディアクエリを記述すること一手間かけて制御してきました。

HTML5.1のpictureタグはHTMLに入れ替わる画像の記述を簡単に済ます事ができるのでとても使いやすいです。

例としては下記のような記述になります。

<picture>
	<source media="(max-width: 480px)" srcset="https://placehold.jp/320x150.png"><!-- 画面サイズ480px以下 -->
	<source media="(max-width: 768px)" srcset="https://placehold.jp/480x150.png"><!-- 画面サイズ768px以下 -->
	<source media="(max-width: 992px)" srcset="https://placehold.jp/768x150.png"><!-- 画面サイズ992px以下 -->
	<source srcset="ttps://placehold.jp/992x150.png"><!-- 画面サイズ993px以上 -->
	<img src="https://placehold.jp/1200x150.png" alt=""><!-- ブラウザ非対応時に表示する画像 -->
<picture>

☆デモ

pictureタグの中にsource属性をネストしきます。
media属性に画面サイズの指定をして、srcset属性で画像パスの指定をします。
今回の例ですと、

画面サイズ993px以上は「992×150.png」が表示される。
画面サイズ992px以下は「768×150.png」が表示される。
画面サイズ768px以下は「480×150.png」が表示される。
画面サイズ480px以下は「320×150.png」が表示される。

それ以外（ブラウザがHTML5.1に非対応など）は「1200×150.png」が表示されるようになります。

従来のCSSによるメディアクエリの設定よりだいぶ簡単になったと思います。

ちなみに対応しているブラウザは下記のURLの通りになります。
http://caniuse.com/#feat=picture

主要なブラウザは大体網羅していますが、IE11とandroid4系には非対応なので、そこだけ注意が必要です。