背景画像(background-img)の修正

viewportタグ(<meta name="viewport" content="width=device-width, initial-scale=1.0">)を使用時、スマートフォン用のスタイルシートでは、背景画像のサイズを指定してあげないと、元々の画像サイズが適用され、画面内に入る範囲でしか表示されず、画像が途切れて表示されてしまいます。特にヘッダー部分に多い現象です。

スマホの画面幅をはみだした背景画像

下記のように背景画像のサイズを指定するコードを追記しましょう。

【CSS】

html {
	background:url('bg.gif') repeat-x;
	background-size:100%;
}
しかし、実際はこれだけでは綺麗にならない事が多い…

レスポンシブデザインのような%単位を使った相対指定では、高さを正確に数値化することが難しいので、思いの外、余白が大きく空いてしまったり、中途半端な位置で画像が途切れてしまうことがあります。

ですから、背景画像で手こずった時は、スマートフォン用の背景画像を用意するのが、最も手っ取り早いです。

スマホの縦画面と横画面
どうしても背景画像を変更したくない場合

場合によっては、PC用とスマホ用で背景画像を変えられない場合もあるでしょう。そんなときは、「vw,」「vh」「vmin」「vmax」という単位を使ってみましょう。

CSS には vw, vh, vmin, vmax という単位がある

※背景画像に関しては、スマートフォンを回転させて、縦画面だけでなく横画面でもチェックしてください。画面の向きによって比率が違うので、両方ともに対応できるようにデザインする必要があります。

スポンサードリンク