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

Picturefillを利用する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Picturefillを使って、ビューポートの大きさに従って異なる画像が読み込み、表示されるレスポンシブイメージの実装を学びます。
講師:
05:35

字幕

このレッスンでは Picturefill を使ってビューポートの大きさに従って 異なる画像が読み込まれ 表示されるレスポンシブイメージの 実装を学びます Picturefill を実際に動作させる前に 現状のサンプルファイルが どのようになっているのかを 確認しておきましょう 現在ブラウザでサンプルの html を開いています ブラウザには Firefox を使っていますが これはレスポンシブデザインを テストするために とても便利なためです 具体的に 機能を紹介しましょう ブラウザの上で右クリックから 「要素を調査」をクリックし 開発ツールを開きます 右上にある 「レスポンシブデザインモード」 というボタンをクリックすると ビューポートの サイズを変更できるようになります この右端の この部分 ハンドルをドラッグすると このように ビューポートの大きさを変更できます また 特定のサイズのビューポートに 設定することができるため レスポンシブデザインの確認に 大変役に立ちます 例えば 800×1280 を選ぶと ビューポートがそのサイズに 360×640 を選ぶと やはり同じようにビューポートが そのサイズに変更されます これらのサイズで コンテンツが どういう表示になるかを 実際に変更しながら確認することができます これから実装するのは 表示される画像が ビューポートの大きさによって 変動するという機能です 現在はビューポートの大きさに 関係なく 常に画像は 幅 1260 px の 大きい画像が表示されています 仮に 例えば このように 横幅が 325 px の 小さいスクリーンでも この部分の画像には 2600 px の幅のものが このサイズまで縮小されて 表示されています エディタを開いて レスポンシブイメージのための コードを書いていきましょう html を開きます 幅に応じて それぞれの画像が表示されるように with 記述子を使って 画像のリストを作成します まず html の中の この画像を表示している img タグの中に ソースセット属性を追加しましょう ソースセット属性は srcset と記述します 値は images フォルダの中にある 画像ファイルを指定してきます 現在 images フォルダの中には このように様々なサイズの画像が 用意されています まず小さい画像から 追加していきましょう images/small.jpeg は 600 px ですので パスの後に半角スペースを空けて 600w と書きます 更にカンマ(,)で区切って 次の画像を指定していきます 中くらいの大きさの images/medium.jpeg は 800 px 更にカンマ(,)で繋げて images/large.jpeg 大きい画像については 1200 px そして特大の images/extralarge.jpeg こちらについては 1600 px です 最後に " を追加するのを 忘れないようにしましょう これでソースセット属性が完成しました ソースセット属性は 1つ以上の画像の URL を カンマ区切りのリストとして設定し ビューポートの幅を元に どの画像ファイルを読み込むかを 設定するものです ブラウザに戻りページを 再読み込みしてみましょう 再読み込みボタンをクリックすると 表示されている画像が変更されました 現在表示されている画像は small.jpeg です 幅は 600 px と表示されています エディタに戻って 再度コードを確認してみると img タグのソース属性では imges フォルダの中の original.jpeg という 2600 px の幅の画像が設定されていますが 現在読み込み表示されているのは srcset 属性で指定した small.jpeg です もし このレスポンシブデザインモードの 機能を使って ブラウザの大きさを変更すると このように Picturefill を使うことで レスポンシブイメージが動作していることが 確認できます 更に このビューポートの大きさを 広げてみると Medium から Large このように画像が次々と 変わっていることが確認できます このレッスンでは Picturefill を使って ビューポートの大きさに従って 異なる画像が読み込み 表示されるレスポンシブイメージの 実装を学びました

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

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

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

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

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

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