コース: レスポンシブイメージ入門
今すぐ登録して、25,300件以上登録されている、業界エキスパート指導のコースを受講しましょう。
xでピクセル密度を制御する
このレッスンではピクセル密度に基づいて 表示する画像を決定する ピケセル密度記述子について学びます レスポンシブイメージにおいて 画像がどのような大きさで表示されるかを― 指定するには ２つの記述子のいずれかを使います ビューポートの幅を指定する width 記述子と ピクセル密度を指定する ピクセル密度記述子です ピクセル密度記述子は どのようなピクセル密度の場合に 画像を読み込むべきか ということを指定することができます width 記述子とピクセル密度記述子を 同時に使うことはできません 使う場合はどちらか片方だけです そしてほとんどのケースでは 実際の動作を確認しやすい width 記述子を使うことが多いでしょう ピクセル密度記述子は 通常 固定の幅の要素のために使われます 固定の幅の要素を レティーナディスプレイのような 高密度スクリーンに表示する時 通常のスクリーンとは 別々の画像ファイルを指定するためです またピクセル密度記述子は width 記述子と同じように srcset 属性に追加します 書き方としては 数値の後に x つまり２倍の場合は 2x ３倍の場合は 3x といった形になります では具体的にピクセル密度記述子を使った方が 良いケースはどのようなケースでしょうか サンプルファイルを開いてみましょう ブラウザでサンプルファイルの html を開いている所です ビューポートの幅に応じて レイアウトは変わりますが 表示されている画像ファイルは どのレイアウトの時も同じものが 表示されています このサンプルを ピクセル密度が２倍 または３倍のスクリーンを使って 表示した時は より高解像度の画像を 表示できると良さそうです ここがピクセル密度記述子の出番です エディタで この html を開き 確認してみましょう 現在は４つの異なるサイズの画像が srcset 属性に指定されています しかしピクセル密度記述子を使うことで その数を減らすことができそうです 例えばデフォルトで使う画像 small.jpg は 1x という指定になります その１つ上のサイズは使いませんので 削除できます ２倍のピクセル密度では large.jpg が使えますので 2x として指定します 最大の画像は削除します これによって通常のスクリーンでは small.jpg が…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。