webサイト制作の勉強|2018月2月クラスブログ

webサイト制作の勉強に関する解説ブログです。

レスポンシブイメージの設定

img要素を画面幅によって切り替えたい場合、以前はJavascript等でwindow幅によって画像のファイル名を変える、などの方法が取られていましたが、html5.1,で策定された「レスポンシブイメージ」を使う事で手間のかかるCSSJavaScriptを必要とせず、htmlのみでデバイスによって適切なimgが表示させられます。

レスポンシブイメージの特徴
  • CSSJavaScriptを使わず、HTMLのみでレスポンシブな画像を取り扱える
  • バイスに応じた最適な「大きさ」の画像を表示できる
  • バイスに応じた最適な「見た目」の画像を出し分けでできる

picture要素

picture要素を使うと、画面解像度や画面幅、画像形式等に基づいて、開発者が任意の画像を出し分けることが可能です。
pictureタグは複数のsourceタグと一つのimgタグで構成されます。sourceタグには3つの属性を指定します。

  • media属性(メディアクエリ)
  • srcset属性
  • sizes属性
srcset属性

画像ファイルのパスと横幅は、imgタグのsrcset属性に記述します。「画像ファイルの横幅」は、「画像をウェブページ上で表示する際の横幅」では無く画像自体の横幅です。


sizes属性

表示する画像の横幅はsizes属性に記述します。メディアクエリーと組み合わせて複数の横幅を指定可能です。ディスプレイ1280px以下の時は画面幅、それ以外では1280pxで画像を表示したい場合は次のように記述します。

sizes="(max-width:1280px) 100vw, 1280px"
レスポンシブイメージのソース

今回の仕様は

  • バイスの横幅が641px以上の場合は960px幅のpc用画像を表示。
  • バイスの横幅が640px以下の場合は640px幅のsp用画像を表示。
<picture>
<source media="(max-width:640px)"
          srcset="img/sp.jpg 640w"
          sizes="100vw">
<source srcset="img/sp.jpg 640w,
                  img/pc.jpg 960w"
          sizes="(max-width:960px) 100vw, 960px">
  <img src="img/pc.jpg" alt="">
</picture>



レスポンシブイメージは便利な機能ですがIE11では非対応なので、IE対応必須という要件ではポリフィルを用います。


ics.media