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

レスポンシブイメージのしくみ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ブラウザのさまざまな大きさの表示領域や、異なるデバイスに合わせて、最適な画像を表示するための、レスポンシブイメージのしくみについて学びます。
講師:
03:38

字幕

このレッスンではブラウザの 様々な大きさの表示領域や 異なるデバイスに合わせて 最適な画像を表示するための レスポンシブイメージのしくみについて 学びます ウェブページを訪問した時 ブラウザは 必要なコンテンツだけをダウンロードし 必要のないものは 何もダウンロードしないことが理想的です これはレスポンシブイメージが 達成しようとしていることでもあります ページ上部に画像を幅いっぱいに広げる ページの例を考えてみましょう 簡単に言うとレスポンシブイメージは 異なるサイズの異なる画像ファイルを オプションとして指定し ブラウザに表示させる仕組みです ブラウザは画像が表示されると 仮定したスペースが どのくらいのサイズかを割り出し 指定されたオプションから 最適な画像ファイルを選択し 表示します この例では3つの画像と レスポンシブイメージのための マークアップを用意します 大きく高解像度のディスプレイのための 大きな画像 通常サイズのディスプレイのための 中くらいの画像 そして小さなモバイルデバイスのための 小さな画像です デバイスがページを訪問すると ブラウザは画像のためのスペースが どのくらいかを割り出し その後 最適な画像を表示します 実際にブラウザで確認してみましょう 現在このブラウザで開いている HTML では レスポンシブイメージのマークアップが 実装されています 現在表示されている画像は Small と書いてあり 小さい画像が 表示されていることがわかります この方法の素晴らしい所は ブラウザが表示に必要な画像ファイルのみを ダウンロードしている所です 他の画像は読み込みません モバイルデバイスにおいて この小さな画像のみをダウンロードし データの無駄がなく ひいては ページの読み込みが速くなる ということを意味しています デスクトップでは現在のビューポート ブラウザの表示領域に基づいて 画像ファイルが読み込まれます ブラウザのサイズを変更してみましょう 少し大きくして 再読み込みをしてみます すると 先程は小さい画像だった箇所に Medium と書かれた 中くらいの画像が読み込まれました このようにビューポートが中くらいの場合は 中くらいの画像が読み込まれます 更に広げて 再読み込みをしてみると 大きいビューポートに 大きい画像が読み込まれました つまり ブラウザの幅を変えた場合は 2種類または3種類 設定によっては それ以上の画像ファイルを 読み込むということになります 但し閲覧中のブラウザの ウィンドウサイズの変更は 多くの一般的なユーザーが行うものではなく ウェブデザイナーやデベロッパーが 動作確認のために行うものです そのため ほとんどのユーザーは そのビューポートとデバイスに 最適な1種類の画像ファイルのみを 読み込むことになります このレッスンではブラウザの 様々な大きさの表示領域や 異なるデバイスに合わせて 最適な画像を表示するための レスポンシブイメージのしくみについて 学びました

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

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

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

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

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

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