レスポンシブ背景画像を Web サイトに追加する方法

CSS を使用してレスポンシブ デザインの画像を追加する方法は次のとおりです。

ハンナ・メンツ/ゲッティイメージズ

今日の人気のある Web サイトを見てください。デザイン処理の 1 つは、画面全体に広がる大きな背景画像です。これらの画像を追加する際の課題の 1 つは、ウェブサイトがさまざまな画面サイズとデバイスに対応しなければならないというベスト プラクティスに由来します。 レスポンシブ Web デザイン .

1 つの画像で複数の画面に対応

Web サイトのレイアウトは変更され、さまざまな画面サイズに合わせてスケーリングされるため、これらの背景画像もそれに応じてサイズをスケーリングする必要があります。実際、これらの「流動的な画像」は、レスポンシブ Web サイトの重要な要素の 1 つです (流動的なグリッドやメディア クエリと並んで)。これら 3 つの要素は、当初からレスポンシブ Web デザインの定番でしたが、サイトにレスポンシブ インライン画像を追加するのは常にかなり簡単でしたが (インライン画像は、HTML マークアップの一部としてコード化されたグラフィックです)、背景画像 (CSS 背景プロパティを使用してページにスタイル設定される) と同様に、多くの Web デザイナーやフロント エンド開発者に長い間大きな課題をもたらしてきました。ありがたいことに、CSS に「background-size」プロパティが追加されたことで、これが可能になりました。

別の記事で、 CSS3 プロパティ background-size ウィンドウに収まるように画像を引き伸ばすことができますが、このプロパティを展開するためのさらに優れた便利な方法があります。これを行うには、次のプロパティと値の組み合わせを使用します。

|_+_|

cover キーワード プロパティは、ウィンドウの大きさに関係なく、ウィンドウに合わせて画像を拡大縮小するようブラウザに指示します。画像は画面全体をカバーするようにスケーリングされますが、元の比率と縦横比はそのまま維持されるため、画像自体が歪むことはありません。画像は、ウィンドウの表面全体が覆われるように、ウィンドウ内にできるだけ大きく配置されます。これは、ページに空白のスポットや画像の歪みがないことを意味しますが、画面と問題の画像の縦横比によっては、画像の一部が切り取られる可能性があることも意味します.たとえば、background-position プロパティに使用する値によっては、画像の端 (上、下、左、または右) が切り取られる場合があります。背景を「左上」に向けると、画像の余分な部分が下と右側からはみ出してしまいます。背景画像を中央にすると余分な部分がすべての面からはみ出しますが、その余分な部分が分散されるため、いずれかの面への影響は少なくなります。

「background-size: cover;」の使用方法

背景画像を作成するときは、かなり大きな画像を作成することをお勧めします。ブラウザーは視覚的な品質に顕著な影響を与えることなく画像を小さくすることができますが、ブラウザーが画像を元のサイズよりも大きなサイズに拡大すると、視覚的な品質が低下し、ぼやけてピクセル化されます。これの欠点は、巨大な画像をすべての画面に配信すると、ページのパフォーマンスが低下することです。これを行うときは、適切に行うようにしてください これらの画像をダウンロード速度と Web 配信用に準備する .最終的には、十分な大きさの画像サイズと品質と、ダウンロード速度に適した妥当なファイル サイズの間の満足できる中間を見つける必要があります。

背景画像のスケーリングを使用する一般的な方法の 1 つは、その画像がページの背景全体を占めるようにしたい場合です。そのページが幅広でデスクトップ コンピューターで表示されている場合でも、はるかに小さくハンドヘルドやモバイル デバイスに送信されている場合でも同様です。デバイス。

画像を Web ホストにアップロードし、背景画像として CSS に追加します。

|_+_|

最初にブラウザのプレフィックス付き CSS を追加します。

|_+_|

次に、CSS プロパティを追加します。

|_+_|

さまざまなデバイスに適したさまざまな画像を使用する

デスクトップまたはラップトップのエクスペリエンスのレスポンシブ デザインは重要ですが、Web にアクセスできるさまざまなデバイスが大幅に増加しており、それに伴って画面サイズも多様化しています。

前述のように、たとえば、非常に大きなレスポンシブ背景画像をスマートフォンにロードすることは、効率的でも帯域幅を意識した設計でもありません。

使い方を学ぶ メディアクエリ 表示されるデバイスに適した画像を提供し、モバイル デバイスとの Web サイトの互換性をさらに向上させます。