css3 第3回

css3 background-size

今回はbackground-sizeプロパティについて学ぶ。
全画面表示

縦長

横長

background-sizeの効果

background-imageを画面いっぱいに表示させる際、縦横の比率を維持したまま表示させたい場合に用いる。以下の2つの値がある。

background-size:cover;

サンプル画像のように、ウィンドウサイズに合わせ画像の縦横比が維持されたまま拡大、縮小される。横長の状態にすると、ウィンドウ外は表示されなくなる。

body{
  height:100%;
  background:url(back.jpg) top no-repeat;
  background-size:cover;
}

background-size:contain;

coverの時とほぼ同じ表示だが、横長の状態で画像が全て表示できない場合にはスクロールバーが表示され、全体を見ることができる。

body{
  height:100%;
  background:url(back.jpg) top no-repeat;
  background-size:contain;
  padding-top:66.6%;
}

padding-top:66.6%;については、.htmlに要素を全く入れていない状態で背景画像を表示させるテクニックである(こちらのサイトを参考にした。なお、この手法を使わないと.htmlに要素なしの場合は背景が最小表示されてしまう)。

感想

スマートフォンやタブレット端末の登場により、Webメディアの表示媒体が増えることとなった。開発者はPCサイトでだけ正しく表示されるサイト制作をしていれば良かった時代は終わった。どんなデバイスでも可読性とユーザビリティの高いサイトを制作する必要が出てきた。このような時代のニーズに合わせ、background-sizeプロパティが登場した。
大型テレビは4kが主流となりつつあり、Macは先日5kディスプレイのデスクトップPCを発売した。ヘッドマウントディスプレイもテレビでCMが流れる時代となった。デバイスの進化は続いており、それに伴い開発者のスキルアップも要求され続ける。時代の変化に対応していくのは難しい課題だが、チャンスや面白味もそこにあるのだと感じる。