ライセススタッフが書くブログ。

HTML5.1 新要素<picture>が便利!!

| Web制作のこと

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

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

 

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

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

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

☆デモ

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系には非対応なので、そこだけ注意が必要です。




Webを作るのは人。

INFORMATION

raisez(ライセス)に興味を持った方は、是非チェックをしてください。

Webを楽しむのは人。

CONTACT

Web制作、Webビジネスのご相談はお気軽にご連絡ください。

お問い合わせ
TOPへ戻る