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

picture要素を利用する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
条件によって表示する画像を入れ替えることができるpicture要素の実装について、サンプルファイルを使って実際にコーディングをしながら学びます。
講師:
07:58

字幕

このレッスンでは条件によって 表示する画像を入れ替えることが出来る picture 要素の実装について サンプルファイルを使って 実際にコーディングをしながら学びます 画面はサンプルファイルの中から art-direction.html を エディタで開いたところです picture 要素を動作させるためには 幾つかの条件が必要になります それが正しく動作するためには すべての条件を揃える必要があります まず script タグによって picturefill.min.js を読み込み サポートされていないブラウザで picture 要素を動的に追加します コンテンツの中には figure タグ そして img タグがあり img タグの中では通常の画像や 高密度スクリーン用の画像が srcset 属性で指定されています ここに picture 要素を追加してみましょう picture 要素は元の img 要素の 周りをラッピングし 中身の異なる src 要素のセットを持ちます これにより img 要素の src 属性に 指定されている画像を 差し替えることができます つまり picture 要素はあくまで ただのコンテナとして存在しており media query とともに指定した src 要素を呼びだすため だけのものと考えると良いでしょう ブラウザで現状の html を確認してみましょう このように小さい画面では 画像が ページ全体に広がって表示されています ビューポートを大きくすると 画像がテキストの横に回り込みます 更に大きく広げていくと もう少し画像が小さくレイアウトされます 更に広げると 画像は再び ページ全体に広がって表示されます この それぞれのタイミングで 画像の レイアウトが変わっていくタイミングで 画像を別々のものに 入れ替わるようにしてみましょう エディタに戻ってサンプルファイルの style.css を開きます この中には3つの media query が 含まれています 最初はこの min-width 375px です ここでは右側に回り込むスタイルが 定義されています ここでの画像はデフォルトの正方形の画像と 同じものを使います 次のブレイクポイントは 600px で 画像の幅は33.3% に設定しています ここでは縦長の画像に 入れ替わるようにします 最終的なブレイクポイントは 800px で 画像の幅は 100% です ここでは横長の画像に 入れ替わるようにします そのため picture 要素で扱う ブレイクポイントは この css で指定している ブレイクポイントのうち 600px と 800px が ターゲットになります 実際に picture 要素を 記述していきましょう html に戻り 冒頭で申し上げた通り img タグをラッピングするように picture タグを追加します picture 要素は ただのプレースフォルダですので 特に class は追加しません 画像事態に class を追加したい場合は その外側にある figure 要素 または画像自体に class を追加します それでは picture 要素の内部に 画像を追加していきましょう 追加するのは media query を含んだ src 要素です まずは最も広いスクリーンのための src 要素から始めましょう src 要素はこのようにして media 属性で media query を指定します 1つ目の media query は min-width 800px と指定します 更にこの前に srcset 属性が必要です srcset 属性を書く前に 閉じタグをつけておきましょう srcset 属性は images/elemonkey-wide.jpg と入力します 更に高密度ディスプレイ用に カンマ区切りで 2つ目の値として images/elemonkey-wide-2x.jpg ここではピクセル密度記述子として 2x を入力しておきます media query には min.width 800px つまり 800px 以上であれば このsrcset 属性の値を表示する と書かれています この行をコピー&ペーストして 他の src 要素も追加しましょう もう1つの画像は elemonkey-tall.jpg です 高密度ディスプレイ用のファイル名も 忘れずに変更しておきます そして この画像を表示するための media query は 600px です これで picture 要素は完成です picture タグの中には 2つの src 要素があり 両方ともに media query が定義され srcset 属性があり 最後に img 要素を持っています ファイルを保存し ブラウザで再読み込みをしてみましょう 一番小さいブレイクポイント この状態では 正方形の画像が表示されています 1つ目のブレイクポイントでは 同じ正方形の画像 そしてもう1つ広げていくと 次のブレイクポイントでは 縦長の画像に 入れ替わっていることがわかります 更に広げると 横長の画像に 入れ替わっています picture 要素は一度 構造がわかってしまえば非常に簡単です picture タグの中には 複数の src 要素があり img 要素があり src 要素の中には srcset 属性で表示したい画像を指定します ここではピクセル密度記述子を 使っていますが width 記述子を使うこともできます そして最後に media 属性で 通常 css で使っているような media query を定めます ほとんどの場合では css で使っている media query を そのまま利用することになるでしょう 最後に1つ 注意点を述べておきましょう この picture 要素は Internet Explore 9 では動作しません もし IE9 をサポートする必要があれば picture 要素を動作させるために使っている Picturefill のライブラリの ウェブサイトの中にある SUPPORTING PICTURE IN INTERNET EXPLORE 9 この部分を参照して下さい このレッスンでは条件によって 表示する画像を入れ替えることが出来る picture 要素の実装について サンプルファイルを使って 実際にコーディングをしながら 学びました

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

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

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

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

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

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