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

picture要素とは

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
特定の条件に応じて読み込む画像を指定することができる、picture要素の概要について学びます。
講師:
04:07

字幕

このレッスンでは特定の条件に応じて 読み込む画像を指定することができる picture 要素の概要について学びます レスポンシブイメージは picture 要素という 全く新しい要素を使って 実装することもできます picture 要素は img 要素をラッピングします このように初めは picture 要素です その中に img 要素が入れ子になります img 要素は src 属性 alt 属性を用い 必要であれば srcset 属性を 追加することもできます このサンプルではピクセル密度が 2倍の時の画像を追加しています img 要素とは別に picture タグの中に 複数の src タグも持っています picture 要素の中の src タグは 特定のソースの表示に対して media query を使うことが出来ます この例では幅が 600px 以上の場合である時に tall.jpg または tall-2x.jpg を表示します 幅は 800px 以上であれば wide.jpg または wide-2x.jpg を表示します src タグで指定されている これらの URL は img タグの内側で指定されている URL に置き換えられます つまり picture 要素を使うと img 要素だけを使う時に比べて より詳細な制御が可能になります レスポンシブイメージで img 要素を使う時 ビューポートの幅 またはスクリーンのピクセル密度に基づいて 読み込む画像を変更することができます これに対し picture 要素では特定のポイントで 読み込む画像を変更することができます 大きな違いは img 要素の srcset 属性が ブラウザに画像の選択を任しているのに対して picture 要素はコード側で 画像の選択を強制できる点です では どのような時に picture 要素を使うシーンが必要でしょうか ここでは2つのシナリオを考えられます 第一にアートディレクションについてです 第二はプログレッシブエンハンスメント についてです このレッスンではアートディレクションに フォーカスして考えてみましょう サンプルファイルをブラウザで開きます ここでは Firefox の レスポンシブデザインモードを使って html をモバイルで見ているような 表示にしています ページには象と猿の写真が レイアウトされていますね ではビューポートを広げてみましょう この右端の部分をドラッグして ビューポートを広げていきます 少しビューポートを広げると 画像がテキストの横に回り込みました お分かりのように ここには media query を使っています 更にビューポートを広げてみましょう すると画像が全く別のものに 置き換わりました レイアウトも また少し変わっています 画像の内容としては 象と猿で同じものと言えますが 画像ファイルとしては 全く別のファイルです 更にビューポートの拡大を続けると 再度画像の置き換えが起こりました これがレスポンシブイメージにおける アートディレクションの例です サンプルではわかりやすいように 極端に画像を変えていますが 通常は全体の一部分に ズームインするような画像に 切り替えたい時などに この picture 要素を使います このレッスンでは特定の条件に応じて 読み込む画像を指定することができる picture 要素の概要について学びました

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

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

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

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

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

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