壮HTML477596515日本のウェブサイトにおけるスマートフォン・タブレットユーザーのシェアは約40%に達し、今のウェブデザインはレスポンシブ対応しモバイルを意識した設計が必須です(参照「StatCounter」)。レスポンシブなレイアウトにおいて画像を取り扱う場合、従来は複雑なCSS・JavaScriptコードが必要でした。5.1からは、課題を解決する新仕様「レスポンシブイメージ」が登場します。レスポンシブイメージを使えば、手間のかかるCSSやJavaScriptを必要としません。本記事では、サンプルを通してレスポンシブイメージの特徴と使い方について解説します。・未対応ブラウザへの対策(IE11で利用するための方法)レスポンシブイメージとは一体何か?レスポンシブイメージとは、レスポンシブなウェブサイトにおける画像の取り扱い方を定めたHTMLの技術。主な特徴は次の通りです。CSSやJavaScriptを使わず、HTMLのみでレスポンシブな画像を取り扱えるデバイスに応じた最適な「大きさ」の画像を表示できるデバイスに応じた最適な「見た目」の画像を出し分けできる今回作成するサンプルについてまずは完成形のページをご覧ください。うさぎの画像がレスポンシブイメージで表示されています。520px以上の画面幅のときは、大きさの違うmedium.jpg、large.jpgのうち最適な画像が、520px未満の画面幅のときは、四角にクロップ(切り抜き)された画像がそれぞれ表示されます。完成版サンプル異なる大きさの画像表示の問題点レスポンシブなウェブサイトで画像を表示する場合、スマートフォン、タブレット、ノートパソコン、デスクトップパソコン等、あらゆるデバイス幅・解像度に適した画像を準備する必要があります。作成した画像を次の条件で出し分けるケースを考えます。HTML5のimg要素は画像出し分けには対応していないので、CSSやJavaScriptを使って出し分け処理をする必要があります。small.jpgHTMLとCSSコードの一例です。表示するべき出し分ける画像の数が増えるほど、CSSコードが煩雑になります。5.1に実装されるレスポンシブイメージでは、CSSやJavaScriptを一切用いること無く、HTMLコードのみで画像出し分け処理が可能です。レスポンシブイメージにおける画像出し分けレスポンシブイメージにおいて前述の画像出し分け処理を行うには、HTMLのimgタグに3つの情報を記述します。画像をウェブページ上で表示する際の横幅HTMLコードは下記となります。注目すべきはimgタグに指定されたsrcset属性とsizes属性です。画像ファイルのパスと横幅は、imgタグのsrcset属性に記述します。「画像ファイルの横幅」は、「画像をウェブページ上で表示する際の横幅」ではないことに注意してください。1280w"パスと横幅の間には半角スペースを挿入します。横幅の単位はpxでなくw(幅記述子)を用います。small.jpgは320pxの画像、medium.jpgは640pxの画像、large.jpgは1280pxの画像である、という情報をブラウザに伝えています。表示する画像の横幅はsizes属性に記述します。メディアクエリーと組み合わせて複数の横幅を指定可能です。ディスプレイ1280px以下の時は画面幅、それ以外では1280pxで画像を表示したい場合は次のように記述します。vwとはビューポートの幅に対する割合を示します。100vwは、ビューポート幅に対して100%の割合という意味です。sizes属性に100vwを指定した場合、普通はウインドウ幅の変更に応じて画像サイズが変わります。Safariだけ100vwを指定しても、ウインドウ幅に連動して変化しません。Safariを含む全ブラウザ共通でウインドウ幅に応じて画像サイズを変えたい場合は、CSSでwidthプロパティに%を指定するとよいでしょう。ソースコードを確認するサンプルを別ウインドウで再生するブラウザが最適な画像を選定してくれる従来の画像のレスポンシブ対応では、画面幅1280px以上のときはlarge.jpg、画面幅1280px未満でデバイスピクセル比2の時はmedium.jpgというように、環境に応じてどの画像を表示するのかを開発者が決定する必要がありました。レスポンシブイメージでは、表示すべき画像を判断するのはブラウザです。「画像ファイルのパス・横幅、表示したい画像幅」の情報を元に、クライアントの環境に応じて最適な画像が表示されます。開発者はどの画面幅でどの画像を表示するべきか、について思い悩む必要はありません。注意しなければならないのは、「環境に応じた最適な画像決定」の仕組みはブラウザによって異なることです。次のような挙動があります。最初に開いた画面幅に応じた画像ファイルがキャッシュされ、画面幅を変えても画像は再読み込みされないこの手法では、単にサイズの異なる画像を場合はとくに問題ありませんが、たとえばスマートフォン向けにはトリミングをした異なる画像を出し分けたいといった場合に対応ができません。画像の見せ方をコントロールするアートディレクションここまで作成したコンテンツを再確認してみましょう。ディスプレイに充分な広さがある場合には最適な見え方と言えますが、狭いディスプレイの場合はそうは言えません。今回のようなメインビジュアルでは、主題はうさぎの顔です。狭いディスプレイの場合は顔の部分だけがクロップされた画像を表示するのが理想的です。デバイス毎に見た目の異なる画像を出し分け、最適な画像の見せ方を選択する手法を「アートディレクション」といいます。前述の通り、srcset属性とsizes属性だけでは、デバイス幅毎に強制的に画像を出し分けられません。5.1のレスポンシブイメージではpicture要素が実装されます。基づいて、開発者が任意の画像を出し分けることが可能です。Elementの仕様」)。picture要素の書き方を紹介します。src="pc.jpg"></picture>pictureタグは複数のsourceタグと1つのimgタグで構成されます。sourceタグには3つの属性を指定します。media属性(メディアクエリ)srcset属性sizes属性ブラウザは各sourceタグのmedia属性を評価し、マッチするものがあればsrcset属性で指定された画像を表示します。マッチするものがなかったり、ブラウザがpicture要素に対応していない場合は、imgタグの画像が表示されます。imgタグの指定は必須です。picture要素のサンプルここまで作成したサンプルをアートディレクションに対応させます。画面幅520px以下の時にクロップされた画像(cropped.jpg)を表示します。画面幅520pxより大のときは、これまでの処理を流用しつつsourceタグに書き換えます。alt=""></picture>ソースコードを確認するサンプルを別ウインドウで再生するレスポンシブイメージのクロスブラウザ対応レスポンシブイメージは便利な機能ですが、対応ブラウザが気になるところです。Explorerを除くほぼすべてのブラウザで利用可能です。案件で使用する場合、IE対応必須という要件で依頼され、レスポンシブイメージ未対応のブラウザ向けの対応が必要な場合も多いでしょう。このような場合にはポリフィルを用います。ポリフィル「picturefill」でレスポンシブイメージのクロスブラウザ対応ポリフィルとは、最新のブラウザの機能を古いブラウザでも利用可能にする技術です。レスポンシブイメージのポリフィルの1つとして「picturefill」があります。HTMLコードでスクリプトをを読み込めば、レスポンシブイメージに対応していないブラウザでも、レスポンシブイメージが有効になります。11でポリフィルを使った場合のキャプチャーです。画面幅を小さくした時、picture要素による画像切り替えが行われていることがわかります。9でもレスポンシブイメージに対応する場合は、pictureタグにvideoタグを追記をする必要があります。9がsourceタグを解釈できないためです。alt=""></picture>ソースコードを確認するサンプルを別ウインドウで再生するこれからはレスポンシブイメージを積極的に使おうCSSやJavaScriptを使わず、HTMLのみでレスポンシブなレイアウトの画像表示を扱うレスポンシブイメージ。srcset属性とsizes属性の特徴は、画像サイズの異なる複数の画像情報を示しておけば、ブラウザが環境に応じて自動で最適な画像をユーザーに表示することです。picture要素の特徴は、特定の条件のときに異なる見た目の画像を出し分け、アートディレクションを実現できることです。レスポンシブイメージの用途・メリットを理解し、必要に応じて使い分け、今後のレスポンシブウェブデザイン制作に役立てましょう。CCの画像を複数スケール向けに書き出す機能で作成しています。[ファイル]→[書き出し]→[書き出し形式]より書き出しダイアログボックスを表示すると、[すべてのスケール]の箇所から書き出したいスケールを選択するだけで簡単に複数の画像を書き出せます。平成30年6月13日に内容をメンテナンスしています。メディアアートを学ぶ。MEDIA、Qiita他)、Twitterで積極的に情報を発信中。Lynda.comやSchooの講師も務める。MEDIAは株式会社ICSが運営するオウンドメディアです。ICSはインタラクションデザイン専門のプロダクション。最先端のwebテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。問い合わせ採用情報インタラクションコンテンツの制作や新しいことに挑戦しながら、互いにスキルを高め合えるメンバーをICSでは募集しています。詳しくは採用情報をご覧ください。MEDIAは古い記事でもメンテナンスし続けることで、常に役立つ情報発信を目指しています。