【ホームページ作成】CSS段組4：段の背景色が切れないようにする(前編)

この記事は「スタイルシートで段組をデザインする方法」を解説するシリーズの第4回です。 以前の記事で解説した内容については触れませんので、以前の記事をまだ読まれていない場合は、先にそちらをご参照下さい。
第1回：スタイルシートだけで段組を作る
第2回：スタイルシートだけで作る段組の例
第3回：隣の段が下に回り込むのを防ぐ
（番外編：スタイルシート段組のメリット）

スタイルシートで作る段組に起こる問題点(2)

前回は、段組を構成する段の長さ（高さ）が異なる場合に、「長い段」の中身が隣の「短い段」の下側に回り込んでしまう問題の解決策をご紹介致しました。

実際に活用された方は既にお気づきかも知れませんが、実はそれだけではまだ問題が残る可能性があります。

段の背景色が途中で切れる

段組を構成する段に背景色を指定している場合、短い段の背景色が途中で切れてしまうという問題が起こります（背景画像を指定している場合も同様です）。

2段組を構成している2つの段に、それぞれ異なる背景色（もしくは背景画像）を付けたいと思うことは良くありますね。 その場合、前回までにご紹介した方法だけでは、次の図のような問題が起こります。

短い方の段（上記の例では「D段」）の背景色は、その段が終わった箇所で切れてしまいます。
もちろん、本文側（E段）の方が短い場合でも同様です。（下図）

背景色は、段を構成しているブロックレベル要素に対して塗られているわけですから、 要素が終われば背景色も終わるのは当然です。
しかし、今は「段組」として見せたいわけですから、これでは困りますね。短い段の背景色も、長い段と同じ長さまで塗られる必要があります。

短い段の背景色を途中で切れないようにする

というわけで今回は、段組を構成する際に起こる「背景色が途中で切れてしまう」問題を解決する方法をご紹介致しましょう。背景色ではなく背景画像を使う場合も同様に解決できます。

段組の背景色問題の解決法は次のページで！ →