てんぽ: 可変幅で両側にドロップシャドウ（div一重で）

background-positionを%単位で指定し、ドロップシャドウ用の画像の大きさを調整することで、 画面の両側に影をつけたリキッドデザイン（画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会のような）を実現できます。 しかも必要となるdivはひとつだけです。

このようなデザインでは divを二重にして一方のdivの左端に左側用の影画像を、もう一方のdivの右端に右側用の影画像を背景画像として指定するのが簡単です。

<div id="left">
　　<div id="right">


　　</div>
</div>

#left {
 width: 90%;
 margin: auto;
 background: url(shadow-left.gif) top left repeat-y;
}

#right {
 background: url(shadow-right.gif) top right repeat-y;
}

• div二重で可変幅の両側にドロップシャドウ

なお、ここでいう「リキッドデザイン」とはコンテンツ幅を%で指定した（＝左右の余白率一定の）レイアウトを指しています。 コンテンツ幅をemで指定したいわゆるエラスティックレイアウトや余白の幅をemやpxで固定したものは含みません。

さて、個人的に、このdivが二重になっている構造が気に入りません。 CSS2.1ではひとつのボックスに背景画像はひとつしか指定できないので、可変幅で両側に影をつけるにはふたつのボックスが必要です （固定幅なら両側の影をひとつの大きい画像にまとめられるので必要なボックスはひとつで済む）。

ふたつのボックスとしてhtml要素とbody要素にそれぞれ背景画像を指定する方法が考えられますが、 IE6では初期コンテナブロックを生成する要素の幅を指定できないバグのためにうまくいきません。

二重のdivが気に入らないので、せめてdivひとつでどうにかしたい。というわけで、body要素とdiv要素に背景画像を指定する方法ですが、 同じバグのせいでIE6の後方互換（Quirks）モードでうまくいきません。 このようにdiv二重の場合と同じやり方ではうまくいかないのですが、実はある工夫をすることでこのレイアウトが可能になります。

その工夫とはbackground-positionです。body要素に幅を指定せずに、bodyの背景画像の位置がdivの左端になるようにbackground-positionで調整します（右側の影はdivの右端に指定する）。 divは幅90%でしかもセンタリングされているとすると、左側の影の画像はbody要素の左から5%の位置に表示されなければなりません。

background-positionを%単位で指定した場合の仕様はややこしいもので、 background-position:5%とは「画像の左端を該当ボックスの左端から5%の位置にする」のではなく、 「画像の左から5%の位置と該当ボックスの左から5%の位置を一致させる」という意味になります。

したがって、左側の影の画像は「幅100pxで、左から5pxの位置から影が始まる」ように作っておき、 bodyに対してbackground-position:5%と指定することで、影の位置がdivの左端になるようにします。

• div一重で可変幅の両側にドロップシャドウ