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

レスポンシブイメージの手段の使い分け

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
レスポンシブイメージを実装する手段の使い分けについて学びます。
講師:
02:06

字幕

このレッスンではレスポンシブイメージを 実装する手段の使い分けについて学びます ウェブページにレスポンシブイメージを 実装するためには 2つの主な方法があります 1つは伝統的な img タグを使って srcset 属性や sizes 属性を用いる方法 もう1つは新しい picture タグを使って 異なるメディア条件に対して 異なる画像を設定する方法 この2つです レスポンシブイメージが必要になるシーンは 様々ですが この2つの手段を使い分けて 対処していくことになります ではどのような時に この方法を使い分ければ良いのでしょうか 具体的な例を見てみましょう 大きい または高解像度の画像を 表示したい時 このような時には伝統的な image タグを使って srcset 属性や sizes 属性と 一緒に image を現在の状況に対して どのような画像を表示するか という実装を行います この方法では ビューポートの大きさや ピクセル密度に対して 最適な画像をブラウザが 自動的に判断して 表示することができます そしてもう1つは アートディレクションや プログレッシブエンハンスメントのために 画像を表示したい時です このような時には picture 要素を利用します レスポンシブイメージの実装を行う時 ほとんどのケースでは 画面左側の img タグと srcset 属性 sizes 属性を利用します ごくまれにアートディレクションや プログレッシブエンハンスメントのような 特殊なケースでは画面右側の picture 要素を利用します このレッスンではレスポンシブイメージを 実装する手段の使い分けについて学びました

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

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

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

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

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

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