写真が好き、ならpicture要素は外せないということで色々調べて使ってみました。
picture要素って何？
その名の通り、写真に関する要素であることは間違いないです。そんなの見りゃ分かるよ！というわけで概要を調べてみました。
<picture>要素は、画像リソースの読み込みを宣言的に行う仕組みです。Web 開発者はこの要素によって、CSS や JavaScript によるハックなしに、レスポンシブデザインで画像を扱えるようになります。また、画像リソースの読み込みがネイティブに実装・最適化されたのは、遅いモバイル回線でページを見ているユーザーにも嬉しいことです。これはとくに重要でしょう。（http://www.html5rocks.com/ja/tutorials/responsive/picture-element/）
ということは、CSSでメディアクエリを使用することなく画面サイズに応じて画像をあんなことしたりこんなことしたりできるわけですね！しかし、HTML5のタグはレガシーブラウザでは対応していない場合がほとんどです。というわけで対応表を見てみましょう。
picture要素の対応状況一覧
先日IE11以降のブラウザサポートを終了するという制作者歓喜の出来事が起こりましたが、以下の表を見る限り・・・
どうやらIE11にすら対応してないようですね。
※2020年現在、IEに対応させる必要はなくなりました。
picture要素ではsource要素を使う
picture要素自体は特になんの属性も定義されておりませんので、source要素を使います。ここでは、4つの属性を設定できます。
srcset
srcって属性img要素にあるじゃないですか。あれと同じで、画像のパスを指定してあげる属性がsrcsetです。この属性を指定しないと全く使えないので、必ず指定してください。今回
source media="(min-width: 650px)" srcset="http://sp.ske48.co.jp/img/300x365/kawasaki_narumi.jpg"
のように設定しています。
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のエディタが暴走して記事が結構消えてしまったので(泣)
参考ページ
こちらの記事が一番参考になりました。
IEもマイクロソフトが公式に使わないよう報告しておりますし、新しい要素はぜひ積極的に使っていきたいですね！
