記事をシェアする

html5のpicture要素を使ってみた

記事をシェアする

写真が好き、ならpicture要素は外せないということで色々調べて使ってみました。

スポンサーリンク

picture要素って何?

その名の通り、写真に関する要素であることは間違いないです。そんなの見りゃ分かるよ!というわけで概要を調べてみました。

<picture> 要素は、画像リソースの読み込みを宣言的に行う仕組みです。Web 開発者はこの要素によって、CSS や JavaScript によるハックなしに、レスポンシブデザインで画像を扱えるようになります。また、画像リソースの読み込みがネイティブに実装・最適化されたのは、遅いモバイル回線でページを見ているユーザーにも嬉しいことです。これはとくに重要でしょう。(http://www.html5rocks.com/ja/tutorials/responsive/picture-element/

ということは、CSSでメディアクエリを使用することなく画面サイズに応じて画像をあんなことしたりこんなことしたりできるわけですね!しかし、HTML5のタグはレガシーブラウザでは対応していない場合がほとんどです。というわけで対応表を見てみましょう。

picture要素の対応状況一覧

先日IE11以降のブラウザサポートを終了するという制作者歓喜の出来事が起こりましたが、以下の表を見る限り・・・

Can I use... Support tables for HTML5, CSS3, etc

どうやらIE11にすら対応してないようですね。

picture要素ではsource要素を使う

picture要素自体は特になんの属性も定義されておりませんので、source要素を使います。ここでは、4つの属性を設定できます。

srcset

srcって属性img要素にあるじゃないですか。あれと同じで、画像のパスを指定してあげる属性がsrcsetです。この属性を指定しないと全く使えないので、必ず指定してください。今回

のように設定しています。

media

これはCSSのメディアクエリのブレイクポイントの設定ですね。先ほどのコードを見ていただければ分かる通り、media=”(min-width: 650px)”みたいな感じで設定していきます。レスポンシブデザインの場合は指定してください。

sizes

画像のサイズを指定できます。sizes=”100px”のようにして指定できます。

type

この属性はいまいち最初は理解しづらかったのですが、どうやらブラウザによって読み込めない画像があった場合どのように表示させるのかを指定できるそうです。例えば「source srcset=”images/taishon.webp” type=”image/webp”」を設定して、webpを読み込めない場合jpeg画像を読み込むみたいな使い方ができます。

最後にimg要素を使う

これがいわゆるフォールバックです。source要素の条件に適合しない場合、このimg要素に指定された画像を読み込みます。指定しなければ画像が読み込まれない場合に苦労しますので、必須で指定しましょう。

と、CSSを全く使用せずレスポンシブイメージが設定でき、IEを対象にしなければ積極的に使っていきたいですね。今日はここまで。baserCMSのエディタが暴走して記事が結構消えてしまったので(泣)

参考ページ

こちらの記事が一番参考になりました。

レスポンシブイメージのネイティブサポート - HTML5 Rocks
Take advantage of the new element and new features of in your next responsive website.
スポンサーリンク

記事をシェアする

フォローする

トップへ戻る