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

段の途中で背景色が切れないようにするには？

段組を構成する際に起こる「（短い段の）背景色が途中で切れてしまう」問題を解決しましょう。

ここでは例として、前のページでご紹介した「『メニューのある段』が短い場合」を考えます。 下図のように、メニューの段（D段）の下側に、背景色が塗られない領域があります。
※どちらの段が短い場合でも、解決方法は基本的には同じです。（後述）

前回同様、解決方法は非常に簡単です。 次の図を見て下さい。

段組を構成している範囲（上記の例では「D段」と「E段」）の全体を囲む大きなカバー(囲み)を用意します。
この（段組の外側に作った大きな）カバーに対して、短い段と同じ背景色を指定すると次の図のようになります。

上図では、D段とE段の存在と、外側に作ったカバーの存在を分かりやすくするために、枠線と余白を加えています。
この（説明用の）枠線と余白を外すと次の図のようになります。

いかがでしょうか？ 段組が綺麗にできていますね。
こうすることで、背景色が途中で切れてしまう問題を解決できることがお分かり頂けたと思います。
背景画像を使っている場合も同様です。

※背景画像の場合は、外側のカバーとD段（短い方の段）の両方に背景画像を指定すると、画像の模様が連続しない可能性があります。 背景画像を使う場合は、D段（短い方の段）には背景画像を指定せず、外側のカバーにだけ背景画像を指定するようにした方が良いでしょう。 （もちろん、画像ではなく色しか指定していない場合でも、重複する記述はメンテナンスを面倒にするだけですから、同様に外側のカバーにだけ背景色を指定しておき、D段（短い方の段）には背景色を指定しないでおくことをお勧め致します。）

外側カバーを作るソース

さて、上記でご説明した内容自体は、非常に単純ですね。 単に大きく囲む外側のカバーを作って、それに背景色を付ければ良いというだけのことです。

では、これを実現するソースも簡単か？...というと、実は簡単にはいかない場合もあります。 ここは少し注意が必要なところです。
次のページでソースの例とその見え方をご紹介致します。

ソースの例と注意点は次のページで！ →