backgroundに画像背景を使う場合のレスポンシブ化

レスポンシブサイトはwidthをパーセント数値にするのが基本ですね。それに伴いheightの規準数値を入れることができないので、画像の背景を使うときややこしい問題が発生してしまいます。

そんな画像背景のレスポンシブ化問題をいとも簡単に解決させることができる方法があるのです。

画像背景のレスポンシブ化問題

リピートで使う画像の場合はさほど問題ではありませんが、PCサイトでwidth・heightの数値を入れて画像背景を入れる場合、レスポンシブ化どうするんだ?と思った人も多いとお思います。

背景画像のheightの数値は%は計算で導きだせる

CSS3から登場したbacground-size: cover;またはbacground-size:100% auto;を使うことで、レスポンシブサイトの画像背景の幅は解決できます。

高さはheight:0;を指定しpadding-topに以下の数値を入れることでレスポンシブ化させることが可能です。

問題の高さを導き出す計算式は高さ÷横幅×100=padding-topの%(パーセント)

レスポンシブ背景を実際に使ってみよう

width 600px、height 300pxの背景画像をレスポンシブにしてみる。

02

計算式に画像の幅と高さを当てはめてみると
300÷600×100=50%
padding-topの値は50%となります。

div {
	background-image: 画像URL;
	background-size: cover;
	padding-top: 50%;
	width: 100%;
}

背景画像はいっその事使わないべきか?

スマートフォンの通信もLTEが普及した最近では、前ほど敏感にファイルサイズを縮小させようと敏感になる必要はなくなりましたが、それでもスマホサイトはPCサイトより軽く作らないといけません。サイトの表示速度の早さがSEOに影響を及ぼすとまで言われていますので。

なるべく画像を使わずにCSS3でできることはCSS3で何とかすることが望ましいです。

なので、背景に使おうと思っている画像はいっそのこと使わずに、対処するのも方法の一つです。

正社員という奴隷制度に中指を立てるWebエンジニアです。PHPが得意。繋がれた鎖を断ち切るために、自由を取り戻すために、プログラミングスキルを磨く日々です。プログラミングと個人でもできるビジネスについて、情報発信しています。

詳しくはこちら