最早サイトA、B、Cというカテゴリ分けはあまり意味を為していないけれど、当初のカテゴリ分け基準では、滞在感のあるサイトのノウハウをこのカテゴリに蓄積するはずだったので一応。
ブラウザのウィンドウをぴったりと埋める画像を背景として使い、その上にコンテンツを乗せるというやり方は、サイトに滞在感をもたせようと思ったときの常套手段だ。ただ、CSSのヴァージョンがまだ2.xであったころには、これをやるのがなかなか難しく、時にはJavaScriptやjQueryプラグインの力なども借りなければならなかった。
一方、CSS3に対応しているモダンなブラウザ環境を対象としたサイト作りであれば、こういったデザインも容易に実現できる。滞在感が表現できる上、ウィンドウに追随して大きさが変化するという特性からレスポンシブデザインとも相性が良い。
ウィンドウの大きさに追随する背景の指定
CSS3では、背景画像や色を指定するbackground系プロパティのひとつとして、background-sizeというプロパティが追加された。無指定の場合の初期値はautoだが、スペース区切りで値を2つ指定することで、それぞれ画像の幅と高さを決められる。たとえば指定要素に対して幅は50%、高さは200px固定というようにしたい場合の指定は以下のようになる。
background-size : 50% 200px; |
また、特別な指定値としてcontainとcoverがある。containは背景画像として利用する画像をアスペクト比を保ったまま拡大・縮小し、クリッピングすることなく要素内に表示できる最大サイズにしてくれる。したがって、指定先の要素とアスペクト比が異なる場合には必ず画像の全体が表示された上で余白が生じる。
background-size : contain; |
一方、coverは元画像のアスペクト比を保ちつつ拡大・縮小し、指定先要素の中に余白を生じることなく画像を表示する。したがって、アスペクト比が異なるのならば、画像は確実に一部分がクリッピングされる。
background-size : cover; |
したがって、ウィンドウサイズに合わせた背景画像を表示するためには、このbackground-size:cover;とmin-height:100%;をhtml要素に指定するという手順となる。
html{ min-height : 100%; background-size : cover; } |
min-heightの指定が必要であるのは、内包するコンテンツのサイズによってhtml要素の縦の長さが変わるためだ。
ただ、background-size:cover;を指定する場合の背景画像は、抽象的画像や大写しの風景など見切れても不都合の無いものを選ぼう。人の顔などの場合には、見切れてしまうと大変格好悪い。
また、background-sizeプロパティはbackgroundショートハンド（省略指定）の対象となるので、background-sizeを指定した後あらためてbackgroundで指定しないようにする注意が必要である。
