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

xでピクセル密度を制御する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ピクセル密度に基づいて表示する画像を決定する、ピクセル密度記述子について学びます。
講師:
03:32

字幕

このレッスンではピクセル密度に基づいて 表示する画像を決定する ピケセル密度記述子について学びます レスポンシブイメージにおいて 画像がどのような大きさで表示されるかを― 指定するには 2つの記述子のいずれかを使います ビューポートの幅を指定する width 記述子と ピクセル密度を指定する ピクセル密度記述子です ピクセル密度記述子は どのようなピクセル密度の場合に 画像を読み込むべきか ということを指定することができます width 記述子とピクセル密度記述子を 同時に使うことはできません 使う場合はどちらか片方だけです そしてほとんどのケースでは 実際の動作を確認しやすい width 記述子を使うことが多いでしょう ピクセル密度記述子は 通常 固定の幅の要素のために使われます 固定の幅の要素を レティーナディスプレイのような 高密度スクリーンに表示する時 通常のスクリーンとは 別々の画像ファイルを指定するためです またピクセル密度記述子は width 記述子と同じように srcset 属性に追加します 書き方としては 数値の後に x つまり2倍の場合は 2x 3倍の場合は 3x といった形になります では具体的にピクセル密度記述子を使った方が 良いケースはどのようなケースでしょうか サンプルファイルを開いてみましょう ブラウザでサンプルファイルの html を開いている所です ビューポートの幅に応じて レイアウトは変わりますが 表示されている画像ファイルは どのレイアウトの時も同じものが 表示されています このサンプルを ピクセル密度が2倍 または3倍のスクリーンを使って 表示した時は より高解像度の画像を 表示できると良さそうです ここがピクセル密度記述子の出番です エディタで この html を開き 確認してみましょう 現在は4つの異なるサイズの画像が srcset 属性に指定されています しかしピクセル密度記述子を使うことで その数を減らすことができそうです 例えばデフォルトで使う画像 small.jpg は 1x という指定になります その1つ上のサイズは使いませんので 削除できます 2倍のピクセル密度では large.jpg が使えますので 2x として指定します 最大の画像は削除します これによって通常のスクリーンでは small.jpg が 2倍のピクセル密度を持つスクリーンでは large.jpg が表示されることになります 冒頭で述べたように レスポンシブイメージの ほとんどのケースでは width 記述子を使うことが 多くなりますが 幅が固定されている場合は ピクセル密度記述子を使うと このようにシンプルに書くことができます このレッスンではピクセル密度に基づいて 表示する画像を決定する ピクセル密度記述子について 学びました

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

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

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

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

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

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