トップページ > 本文2段組 > [2]背景を整える

CSSレイアウト[本文2段組のレイアウト-2]背景を整える

<body>要素、またその次の階層のボックス要素に、背景画像や背景色を指定して舞台を整えて行く。
下図はこのページの背景の構造を示したもの。

「body」には、背景色のクリーム色と大きな文様のある背景画像を指定した。
「outline」で囲まれたボックスにサイトの内容が入るが、そのボックスを少し立体的に見せるためにシャドウを付けたい。そのために「outline」ボックスをさらに「outlinebg」というボックスで囲み、シャドウ用の画像をCSSで指定する。
下部のシャドウは「outlinebg」の下に「footerbg」という新しいボックスをつけ、このボックスに下部用のシャドウ画像を指定する。 図解1

背景のCSS

背景のCSSの指定は下記のようにbase.cssに指定。
body {
color: #666666;
text-align: center;(←オールドブラウザ用センタリング指定)
margin-top: 0px;
font: 12px/1.6 Arial, Helvetica, sans-serif;
background: #FFFDDE url(../img/body_bg.gif) no-repeat center -65px;
↑全体の背景色を指定。文様のある画像を指定。その画像のリピート無し。位置はセンター合わせ、上は65px下がったところから表示。
}
#outlinebg {
width:810px;
margin: 0px auto;(←モダンブラウザ用センタリング指定。記述についてはCSSのショートハンド参照 )
background: url(../img/outline_bg.gif) repeat-y;
↑画像を指定。その画像を縦(Y軸方向)のみにリピート。
}
#outline { ←これがサイトの内容が入るボックス
width:800px;
text-align:left;(←オールドブラウザ用センタリング指定の影響をここで断ち、左合わせに戻す)
font-size: 86%;
line-height: 1.6em;
margin: 0px auto;
word-spacing: 0.5em;
}
#footerbg {
width:810px;
height: 11px;
margin: 0 auto;(←モダンブラウザ用センタリング指定。記述についてはCSSのショートハンド参照 )
background: url(../img/footer_bg.gif) no-repeat;
↑下のシャドウの画像を指定。リピートなし。
}
ここまでのHTMLの記述は下記のようになっている。

<html>
<head>
<title></title>
<link rel="stylesheet" href="../css/style_import.css" type="text/css" />
</head>

<body>
<div id="outlinebg">
<div id="outline">
(ここに本文スペースが入る)
</div><!-- END outline -->
</div><!-- END outlinebg -->
<div id="footerbg"></div><!-- END footerbg -->

</body>
</html>

図解 上記のHTMLでブラウザ表示は左のようになる。

#outlinebgの背景画像「outline_bg.gif」は、メニューとメイン部分の色分けを既にしている。
これはメイン部分が長くなった場合(本文の文章量が多い場合)、メニューの背景色がそれに伴わず途中まででキレてしまうのを防ぐため。

メニュー(ここでは#side)とメイン部分(#main)の高さを揃えるには、Ajaxライブラリを使う方法が便利。#mainと#sideの高さが揃えば、それぞれに背景色をCSSで指定すれば良い。
#mainと#sideの高さを揃える方法は「Ajaxライブラリ使用サンプル集:ブロック要素の高さを揃える」を参照に。