: サイト構築 -CSS

[CSS]セミリキッドレイアウトの両端に背景画像を配置するスタイルシート

セミリキッドレイアウトの両端にドロップシャドウの背景画像を配置するスタイルシートをSoh Tanakaから紹介します。

Tips for Developing Semi-Liquid Layouts
demo

デモでは、入れ子にしたdiv要素にそれぞれ背景画像を設置。
親は中央配置にし、min-width, max-widthを設定。
子はoverflow:hidden;を指定し、paddingなどを設定します。

HTML

<div id="content_wrap">
<div class="content">
	<!--Content-->
	</div>
</div>

CSS

#content_wrap {
	background: #fff url(body_shadow_L.gif) repeat-y left top; /*--Left drop shadow--*/
	margin: 0 auto;
	padding: 0;
	min-width: 780px; /*--Minimum Width--*/
	max-width: 1200px; /*--Maximum Width--*/
}
.content {
	background: url(body_shadow_R.gif) repeat-y right top; /*--Right drop shadow--*/
	margin: 0;
	padding: 25px 40px; /*--Padding inside of the main content--*/
	overflow: hidden;
	font-size: 1.2em;
}

IE6対策としては、スクリプト（JSizes）の使用やIE6のみ固定幅に指定する対応が紹介されています。

応用として、固定サイズのバナーの配置、%指定のカラム、固定＋可変のカラムのデモもあります。