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

srcsetとwを利用する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
srcset属性とwidth記述子の実装について、サンプルファイルを使って実際にコーディングをしながら学びます。
講師:
05:28

字幕

このレッスンでは srcset 属性と w (width) 記述子の実装について サンプルファイルを使って実際に コーディングしながら学びます サンプルファイルを基に srcset 属性と w 記述子を実際に実装してみましょう 画面では Firefox でサンプルファイルを 開いているところです 現在はシンプルに1枚の画像が 表示されているだけです 右クリックから「要素を調査」を選んで 開発ツールを開き 右上にある 「レシポンシブデザインモード」を クリックすると ビューポートの幅を変更することができます ここではまだレシポンシブイメージの マークアップを行っていないので どんな幅でも1枚の画像が拡大縮小されて 表示されていることが分かります では実際にレシポンシブイメージの為の マークアップを行っていきましょう エディターでこの HTML を開きます HTML の真ん中辺りに 画像を表示している img 要素があります 既に src 属性と alt 属性を持っています ここに srcset 属性を追加していきます 値としては w 記述子と共に ビューポートの幅に応じて 表示したい画像をリストで指定して行きます 記述する順番はどのような 順番でも構いませんが 人間が見た時に分かりやすいように 小さいものから大きいものの順に 書いていきましょう 初めに 最小の画像を入力します まず この部分に srcset 属性を追加します 綴りは srcset です = の後に " " を入れて この間に値を入力して行きます 最小の画像は images フォルダの中にある― small.jpg です この画像を開いて確認してみましょう サイドバーにある images フォルダの中の small.jpg を開きます 画像の左上には 600 x 400 という 画像のサイズが書かれています 幅は 600px ですので ビューポートの幅が 600px 以下の時に 表示するのが良さそうです HTML に戻って 画像パスの後に 半角スペースを空けて 600w と入力します 続いてカンマを書きます カンマで区切ることで 複数の URL を指定できます 分かり易いように Enter キーを押して 次の画像を追加していきます 次の画像は images/medium.jpg です こちらも同じように画像を確認してみましょう 画像の幅は 800px です 800px でしたので HTML に戻って 800w と追加します 同じようにカンマで区切り 続いて大きな画像 images/large.jpg を追加します 画像の幅は 1200px ですので 対象とするビューポートの幅も 1200w そして最後に 1番大きな画像として extralarge.jpg こちらも幅を確認すると 1600px であることが分かります HTML に戻って 1600w と入力します これで レスポンシブイメージの為の srcset 属性の実装が完了しました HTML を保存し ブラウザに戻ってリロードしてみます リロードボタンをクリックすると 画像の左上にその画像の大きさが 書いてありますので どの画像が表示されているのか 分かり易いようになっています 現在はビューポートの幅が狭い状態ですので 表示されている画像も 小さい画像が表示されています 徐々にビューポートの幅を広げてみましょう すると 600px を超える辺りで 画像が medium 中位の大きさの画像に 変わったことが分かります もう一度変えてみます small から medium このようにビューポートの幅に応じて 表示される画像が変わっていることが 分かります 更に広げて行くと medium の次の large 更に広げると extralarge と このようにビューポートに応じて 4つの画像が表示されるようになりました 更に画面の幅が広がった場合 ブラウザは srcset 属性で指定された 最大の画像を表示し続けます このレッスンでは srcset 属性と w 記述子の実装について サンプルファイルを使って実際に コーディングをしながら学びました

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

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

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

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

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

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