前回のエントリーに続き、今回は2段組の部分をやっていきます。

取り合えず、2段組部分の仕様をば。

  • デザインを見ていただければお分かりになるかと思いますが、サイドメニューの下に破線があるんですが、その破線がちゃんとメインコンテンツ部分の内容にあわせて伸びる（繰り返す）ようにします。
  • ボクの組み方はfloatなんでpositionを使った全体のレイアウトに関しては、ウチでは期待しないで下さい。（ポジションによるレイアウトでサイトを作成した経験がありません...）
  • このサンプルのHTMLはサイドメニューがソース上、コンテンツの上に位置してます。
    メインコンテンツ部分が上に来ても同様のレイアウトが実現できますが、それは追々ってことで。

だいたいこんな感じです。
んじゃ、いってみますか、、、

すんごい簡単におさらい

前回、下記の状態まで組みました。
http://css-happylife.com/template/practice-01/05/

段組み用のdivを追加する

<$MTEntryTitle$>段組に入る前に、構成用に作成した左記の画像を見てください。

div container を親に、side と mainが内包されてますよね？

必要最低限のソースだけ書くと下記のようになります。

<div id="container">
<div id="side">
・
・
・
<!-- / side END --></div>
<div id="main">
・
・
・
<!-- / main END --></div>
<!-- / container END --></div>

サイドメニューのベース部分をつくる

containerの一番大事な役目が、背景画像をメインコンテンツに合わせて繰り返すって部分ですが、取り合えずcontainerは空で、先にsideのベースになってくる部分から作っていきます。

/*
 container [
----------------------------------------------------------- */
#container {
}
/*
 container
 side [
----------------------------------------------------------- */
#side {
	float:left;
	width:148px;
	margin-right:10px;
	background:url(../img/bg_sidemenu.gif) repeat-y;
	border:1px solid #CCC;
}

横幅は150pxですが、border:1pxを指定しているので、左右の1px分を引いて148pxになります。
この辺の細かい計算は後から調整でもいいと思います。（間違って横幅取りすぎて、回り込まなくなって原因探るより効率がいいので。）

sideにmargin-right:10pxを指定しているのは、mainをfloat:leftで回り込ませた場合、IE6のmarginが2倍になっちゃうバグが発生するので、sideでmargin-rightを取ってます。

詳しくはこっち→IEバグ：marginの値が指定値より大きくなる

上記のスタイルが適用されると実際の表示は下記のような感じになってると思います。
http://css-happylife.com/template/practice-01/06/

なんか、取り合えず回り込んだのがお分かりになるかと。

ちなみに、このコメントアウトの書き方ですが、sideの親にcontainerがあるよーって事を意味してます。
この辺は自分流で分かればいいかと。

メインコンテンツ部分を回り込ませる

次にmainがちゃんと段組みになるよう回り込ませます。

/*
 container
 main [
----------------------------------------------------------- */
#main {
	float:left;
	width:570px;
}

メインは単純にfloat:leftで回り込ませて、横幅指定してるだけです。
実際の画面は下記です。
http://css-happylife.com/template/practice-01/07/

IEでフッターが素敵な位置に有りますが気にせず。

containerにスタイルを適用する

そしたら、containerにもスタイルを適用していきます。

/*
 container [
----------------------------------------------------------- */
#container {
	float:left;
	margin-bottom:10px;
	padding:0 10px;
	background:url(../img/bg_side.gif) repeat-y 150px 0px;
}

このスタイルを追加すると、実際の画面では下記のようになってると思います。
http://css-happylife.com/template/practice-01/08/

一気にキレイに整った感が。
こういう時に喜びを感じちゃいます。

と、まぁそれはいいとして、containerにfloat:leftが指定されていますが、コレが背景画像を繰り返す為の仕掛けです。

floatを取ると背景が消えちゃいます↓
http://css-happylife.com/template/practice-01/09/

この辺の詳細については、サイドの背景画像を本文にあわせてページの最後まで表示するを参考にしてください。

ちなみに見た感じただのborderですが、borderでは実現できません（ボクは知りません）
また、背景の位置ですが、marginなどの単位は0の場合省略できますが、背景の位置に限っては0でも単位を省略できません。

あと、containerでpaddingの調整及びフッターとのmarginを調整をしてます。

ともあれ、コレで2段組は完了です。
お疲れ様でした。

順番的に、サイド作ってもメインコンテンツ部分作ってもいいんですけど、大枠から作っていった方が良いと思うので次のエントリーでは、フッター部分を作成しようと思います。