レスポンシブイメージ入門

srcsetとwとは

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
レスポンシブイメージを実装するためのsrcset属性と、ビューポートの幅に基づいて画像を選択させるためのwidth記述子について学びます。
講師:
03:19

字幕

このレッスンではレスポンシブイメージを 実装するための srcset 属性と ビューポートの幅に基づいて 画像を選択させる為の w (width) 記述子について学びます 最も基本的なレスポンシブイメージでは 従来の src 属性と alt 属性を含む img タグに対して 画像の URL とそれぞれの width 幅の記述子がセットになって カンマ区切りのリストとして定義される 新しい srcset 属性を利用します URL の指定方法は これまでの src 属性と同じで 絶対パス ルート相対パス 相対パス等が利用できます 後ろ側にある w 記述子は 数字と w で構成されます ここでは数値に画像の 実際の幅を指定しています これがどのように動作するかを 見て行きましょう ブラウザがページを読み込む時 img タグの中にある src 属性と srcset 属性をチェックします ブラウザが srcset 属性を サポートしていない場合は src 属性で指定されている ファイルを読み込みます 逆に srcset 属性をサポートしている場合は ブラウザのビューポートの幅を基に srcset 属性で指定されているリストの中から 最適な画像ファイルを選択し src 属性の代わりに そのファイルを読み込みます 画像の選択はビューポート全体の幅と w 記述子の値の比較によって 行われます この例では w 記述子の値が 1200 で指定されているので ビューポートの幅が 1200px よりも小さければ large.jpg が表示されます 一方で ビューポートの幅が 1201px であれば w 記述子の値よりも大きくなる為 extralarge.jpg が表示されます また ここでは CSS におけるピクセルと デバイスにおけるピクセルの 区別をつけておくことが重要です 例えば ピクセル密度が 2倍のタブレットで表示する場合 CSS 上のピクセルは 800px だとしても デバイス上のピクセルは 1600px あることになります このような場合 ブラウザは medium.jpg ではなく extralarge.jpg を表示するでしょう 表示するデバイスのピクセル密度に 注意して下さい このように srcset 属性に w 記述子を使うと ビューポートの全体の幅に基づいて ブラウザは適切な画像を選択し 表示する仕組みを実装できます このレッスンではレスポンシブイメージを 実装するための srcset 属性とビューポートの幅に基づいて 画像を選択させる為の w 記述子について学びました

レスポンシブイメージ入門

このコースではレスポンシブWebデザインにおける画像の取り扱い方やレスポンシブイメージについての考え方、またその実装方法などについて解説します。Picturefillを使った実装やimgタグのsrcset属性を使った実装、またpictureタグを使った実装方法などを実際にコーディングしながら説明します。

1時間38分 (20 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2015年12月08日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。