Lesson 04 背景画像の複数指定で手軽にリッチなデザインに - Webデザイン表現&技法の新・スタンダード・CSS3&HTML5編

2011.7.27 WED

Webデザイン
表現&技法の
新・スタンダード

Lesson 4

背景画像の複数指定で
手軽にリッチなデザインに

	制作・文	山田敬美
＞	To Use	CSS
＞	Browser	IE 9over \| Firefox 3overSafari 4over

CSS3では1つの要素に複数の背景画像を指定できるようになったため、無駄なdivを使わずに、背景画像をいくつも重ねるような複雑なデザインも手軽に再現できるようになった。

01

複数の背景画像を指定することで、四隅に背景画像が配置された縦横に伸びるボックスを1つのdivでつくる手順を解説していこう【1-1】。

【1-1】この4つの画像を使用する

02

背景画像を複数指定する方法は、background-imageプロパティに、カンマ区切りで複数の画像を指定していくだけだ【2-1】。重なり順は最初に指定したものが1番上になり、それ以降は指定した順番通りに重なっていく【2-2】【2-3】。

【2-1】div.background-imageにスタイルを指定する

【2-2】カンマ区切りで複数の背景画像を指定する

【2-3】4つの画像が重なって表示された

03

背景画像の繰り返し方法を指定するには、background-repeatに背景画像の数だけカンマ区切りで指定する。ここではすべて同じno-repeatであるため、省略して1回だけ指定した【3-1】【3-2】。

background-repeatで指定した値が背景画像の数より多い場合は超過分は無視され、少ない場合は背景画像の数と一致するまで指定が繰り返される【3-3】。

また、CSS3になって繰り返しを縦横個別に指定したり、spaceやroundといった新しいキーワードでの指定もできるようになった（ただし2010年11月現在では対応しているブラウザは存在しない）。

【3-1】background-repeat: no-repeat, no-repeat, norepeat,no-repeat;と同じ扱いになる

【3-2】すべての背景画像が繰り返されなくなった

【3-3】このような指定の場合、background-repeat: no-repeat, repeat, no-repeat, repeat;となる

04

background-position も背景画像の数だけカンマ区切りで指定できる【4-1】【4-2】。指定する順序は、必ず左右、上下の順に指定するという制限が追加されたので注意しよう。なお、CSS3では背景画像の表示位置を細かく指定できるようになる。いままではtop/bottom/left/right/centerといったキーワードで指定するか、上と左からの距離を数値で指定するしかなかったが、CSS3では右と下からの距離も細かく指定できるようになった（right 10px bottom 10pxなど）。ただし2010年11月現在では対応しているブラウザは存在しないため、実際に使えるようになるのはもう少し先になる。

【4-1】4つの背景画像の位置をそれぞれカンマ区切りで指定

【4-2】それぞれのコーナーに背景画像が配置された

05

背景画像のサイズを個別に指定することもできる。横幅、縦幅の順で指定するが、値が1つだけの場合は縦がautoになる。ただし、現在はブラウザによって挙動が異なるため、横幅と縦幅の両方を指定しておくのが安全だ【5-1】【5-2】。

px や% による指定以外にも、auto/contain/coverなどのキーワードによる指定も追加された。containやcoverは元の画像の比率を保ったまま、画像の縦横のいずれかのサイズに合わせて、ボックスにピッタリ収まるように指定できる。

【5-1】4つの背景画像の位置をそれぞれカンマ区切りで指定。ベンダープレフィックスが必要だ

【5-2】背景画像のサイズが小さくなった

06

その他の使い方として、背景画像だけでなく、CSS3のgradient（グラデーション）と組み合わせてもおもしろい。gradient はbackground プロパティの値として指定するため、背景画像を指定するのと同じように扱うことができる【6-1】【6-2】【6-3】。ただし、gradientは現状ベンダープレフィックスが必要となり、WebkitとMozillaでグラデーションの指定方法が異なるので、それぞれ個別に分けて指定する必要がある。