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

Webページにおける画像のしくみ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Webページにおいて画像がどうやって表示されているのか、というしくみをもとに、レスポンシブイメージが必要とされる背景について学びます。
講師:
05:29

字幕

このレッスンではウェブページにおいて 画像がどうやって表示されているのか という仕組みを元にレスポンシブイメージが 必要とされる背景について学びます ウェブ上の画像について話す時 それがどうやって動いているのかを 覚えておくことが重要です 初期のウェブを思い出してみましょう W3C の html の仕様書には 「<IMG>タグは、HTMLドキュメントの 中に、インライングラフィック― (通常はアイコンや小さなグラフィック) を含めます。」 と書いてあります この定義からわかるように 元々IMG要素はインライン要素 つまりテキストの横に 並んで表示されるものです 現代のIMG要素の定義は この狭い内容を はるかに大きく超えています 画像はほとんどのケースで ブロックレベル要素の中に大きく表示され ウェブの重要な一部となっています 画像を表示するために ブロックレベル要素に変更したり ディスプレイプロパティを変更したり コンテナの中にラッピングしたり といった具合です 実際に image タグがどのように 動作しているかを確認しておきましょう HTML では image タグを挿入し ソース属性を与えることで 画像ファイルがどこにあるかを ブラウザに伝えます 更に完全を期すため 画像が表示されない時のために Alt 属性を使って代替テキストを追加します ブラウザは画像ファイルを取得し HTML の中での位置を認識して そこに合わせて画像を スケーリングした上で配置します オプションとして 画像を特定の大きさに制限するため イメージタグに width 属性と height 属性を追加することができます ここでコードの例を挙げて 確認してみましょう コードエディタでサンプルの HTML を開きます 現在の HTML では image タグは 何らかのコンテナの内部に配置されます この HTML では image タグが figure タグの中に配置されています そして css を使って 画像がコンテナの中に収まりながら 拡大 縮小するよう ブラウザに指示しています css のこの部分で 幅をコンテナの 100% に設定し 比率を保持するために 高さを自動的 つまり auto に設定します このようにすることで ブラウザのサイズに合わせて 画像が動的に広がるようになります 実際にブラウザで確認してみましょう このようにブラウザを 任意のサイズに変更すると 画像は常にフィットした状態になります 画像の幅が広がったり 狭まったりして レイアウトが変わっていることが わかりますね しかし image タグを使った この古典的な方法では ちょっとした問題があります image タグが導入された時 我々は全員がほぼ同じような解像度と 同じような物理的な大きさのモニターを使って ウェブを利用していました その結果 画像は常に 同じ幅と同じ高さで 常に同じ位置に 固定的に表示することができました 1つの画像リソースで 固定の幅と高さがあれば すべてのニーズを満たしていたわけです しかし 時代は変わり 私たちはスマートフォンやタブレットなど 様々な 画面サイズ 解像度 デバイスの種類を考慮しなければなりません つまり 先程までの1つの画像を すべての環境に適応するアプローチは かなり古くなっているということです スライドで問題を具体的に確認してみましょう ページ上部に幅いっぱいに広がる 画像があるとします 27 インチを超える高解像度のディスプレイに 耐える品質の画像を表示するためには 2600px を超えるような 巨大な画像ファイルが必要になります この時モバイルデバイスを使って 同じページを見ることを想定してみて下さい ブラウザはデスクトップと同じ 巨大な画像ファイルをダウンロードし その小さなビューポートの内側に収まるように 表示することになります 2600px を超える画像ファイルは 600px 程度の幅として表示されるため 約 2000px の幅を 無駄にしていることになるのです 実際には使われない 必要のない大量のデータを ダウンロードしているわけです もちろん問題なく表示はされますが かなり非効率的と言えるでしょう これが今日において レスポンシブイメージを必要とする理由です このレッスンでは ウェブページにおいて 画像がどうやって表示されているのか という仕組みを元に レスポンシブイメージが必要とされる 背景について学びました

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

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

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

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

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

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