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

レスポンシブイメージのための新用語

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
レスポンシブイメージで用いられる、srcset属性やwidth記述子、picture要素といった新しい要素、属性、用語について、かんたんな概要を学びます。
講師:
04:14

字幕

このレッスンでは レスポンシブイメージで用いられる srcset 属性や width 記述子 picture 要素といった 新しい要素 属性 用語について 簡単な概要を学びます レスポンシブイメージのために 幾つか新しい用語があります それぞれに深く取り組む前に 簡単にこれらの新しい用語をご紹介しましょう 「srcset」 「w(width) 記述子」 「x(ピクセル密度記述子)」「 size」 そして 「picture 要素」 これらがそれぞれどういう働きをするか 基本的な概要を説明していきます 伝統的な img タグでは src 属性によって 表示する画像ファイルの URL を決定します レスポンシブイメージでは srcset と呼ばれる新しい属性を利用します srcset 属性は1つ以上の画像の URL を カンマ区切りのリストとして設定できます ブラウザはリストの中から 最適な画像ファイルを選び 元々 src 属性で指定されている URL を 新しい最適な画像ファイルの URL に置き換えます srcset 属性の値では width 記述子 またはピクセル密度記述子を使って URL のリストを追加します まず width 記述子は 画像ファイルが読み込まれる前に ビューポートの幅を元に どの画像ファイルを読み込むかを 決めるために使います 800px の幅で表示する画像のためには 800w と書きます ピクセル密度記述子は 表示するピクセル密度を元に どの画像ファイルを読み込むかを 決めるために使います レティナディスプレイのように ピクセル密度を2倍として表示するためには 2x と書きます 3倍のピクセル密度を持つような 最新のデバイスを対象とするには このように 3x と書くこともできます 何も定義しない場合は デフォルトは1倍 1x に設定されています srcset では width 記述子 またはピクセル密度記述子の どちらか1つのみを使うことができます 同時に両方を使うことはできません 次に sizes 属性では ビューポート全体の幅に関連づけて 画像の幅を指定することができます 値にはメディア条件に続いて 画像を表示したいサイズを カンマ区切りのビストで設定します 画像をビューポート全体の幅 50% で表示したいのであれば sizes 属性を 50vw に設定します 最後にレスポンシブイメージのために src タグのセットを纏める picture 要素です この要素は特定の画像ファイルを 読み込む必要がある時 特定のメディア条件を規定して使います 簡単に言うと先程紹介した image 要素と srcset 属性 sizes 属性がブラウザに 画像を選択する余事を残しているのに対して picture 要素は 特定のメディア条件で 特定の画像ファイルを使用することを ブラウザに強制する仕様になっています このようにレスポンシブイメージのためには 様々な技術が用意されています それぞれに合った使い方を知り 使い分けることが レスポンシブイメージをマスターするための 一歩に繋がるでしょう このレッスンではレスポンシブイメージで 用いられる srcset 属性や width 記述子 picture 要素といった 新しい要素 属性 用語について 簡単な概要を学びました

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

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

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

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

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

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