サイドの背景画像を本文にあわせてページの最後まで表示する（2カラム）

09月18日（月）03:52

category: CSSテンプレート, レイアウト

基本的な段組みレイアウトが出来るようになった後に、最初にぶち当たる壁だと思われる、サイドバーの繰り返し。

コレって、テーブルレイアウトだと容易に実現出来るのですが、通常CSSで段組みをした場合、サイドバーがメインコンテンツより短いと途中で背景が途切れてしまいます。

ソレだと随分いけてないので、ちゃんとメインコンテンツの内容にあわせて表示するようにして上げます。

まずは、サンプルをご覧下さいませ。

サンプル：

http://css-happylife.com/template/02/

持ち帰り用：

http://css-happylife.com/template/02/02.zip

文字サイズを変更して頂ければ、内容にあわせてサイドバーが伸び縮みするのが分かると思います。

---- こっから続き

んでは、どーやって繰り返しているのかの説明をば。

サンプルは、メインコンテンツがある #left_container と、サイドバーの #right_container で構成されていて、ソレを囲む為の#main_containerが御座います。

何となくサイドバーに背景を表示させようと思ったら、#right_container に背景指定し、repeat-yで縦に繰り返しとheight:100%とかでいけちゃいそうですが、コレだと残念ながら繰り返してくれません。

ソコでちゃんと背景画像を繰り返してもらう為に、#left_containerと#right_containerを囲っている#main_containerが大活躍しちゃいます。

div#main_container {
　background:url(img/bg_side.gif) repeat-y right top;
}

↑こんな感じで、#main_containerにサイドバー用の背景画像を指定してあげます。
すると、あら不思議・・・繰り返さない！

これは、floatしているdivが#main_containerの中に有る為に起こります。
その為、親要素である#main_containerにもfloatを指定してあげます。

div#main_container {
　float:left;
　background:url(img/bg_side.gif) repeat-y right top;
}

↑こんな感じで。

コレでばっちり背景が繰り返されます。
なぜ親にfloatを指定する事で背景が繰り返されるかといいますと、floatってのは浮いたような状態になっています。
浮いたような状態というのは、通常の流し込みのルールから外された浮いた存在という意味での浮いたような状態ですが、イメージとして実際に浮いていると考えていただくと分かり易いと思います。

浮いているってことは、floatを指定されたいわゆるフロートボックスの親要素にあたる#main_containerは子要素（フロートボックス）が無いものとして解釈します。子要素が無いんだから、高さが出るはずもありません。

つまり、背景が繰り返されなくなってしまう。

仮に高さが完全に固定のサイトだったら、heightを指定すればその高さ分繰り返しますが、融通がきかな過ぎてあまりにも不便です。

そこでフロートボックスの親要素も同様のルールを適用させる事で、解決するという訳です。
floatを使う事で、ボックスモデルの解釈（marginとか）も変わってしまうので、そのあたりも注意すると良いです。

別の方法として、overflow:autoと指定して上げる事でも繰り返し表示されます。
この方法で繰り返される理由は、まぁ仕様でそう定められているからという解釈でOKです。

もう一つ、有名な方法でclearfixってのがあります。
詳細は、http://css-happylife.com/log/css-hack/000078.shtmlをば。

コレで基本的な背景の繰り返しはOKですが、留意点が有ります。

IEだと、『背景色が指定された要素内にフロートがあるときに要素内の文字が消える』というバグがあるのですが、背景色を指定している場合はwidthプロパティを明示してあげる事で回避できます。

サンプルでは横幅指定していませんが、横幅が決まっているサイトの場合は基本的に指定しておいた方が無難です。

後、IEだと横幅指定すると繰り返し表示されるのですが、コレが罠になる可能性の一つだなぁーと思います。
横幅指定だけだとIEのみが繰り返されるので、「アレFirefoxで繰り返さない。」と言った状態に陥る可能性が有るので要注意です。
必ず親要素にもfloatを指定してあげましょう。

あ、持ち帰り用のテンプレはご自由に改変して試して見て下さいませ。

以上、お疲れ様でしたっ！ボク。