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

外側カバーを作るソース

それでは、外側を大きく囲むカバーを作って、それに背景色を付けるソースをご紹介致しましょう。（ここでは、D段とE段のみを構成するソースを抜き出してご紹介しています。）
基本的には、非常に簡単です。注意すべき点は後半にご紹介します。

●HTML部分

2段組を構成している部分全体を囲む、大きなカバー(要素)を加えなければなりません。 それは、HTML側に加えます。 使う要素は div要素（<div>～</div>）で良いでしょう。
※加えたカバー用div要素には、スタイルシートでスタイルを加えるために、（ここでは）「cover」というクラス名を付加しています。（クラス名は何でも構いません）

<div class="cover">

   <div class="blockd">
      短いメニュー（D段）
   </div>
   <div class="blocke">
      長い本文…（E段）
   </div>

</div>

●スタイルシート部分

「D段の方が短い」場合の例です。
※（短い方の段である）D段には背景色を指定せず、代わりに外側を囲むカバー（coverクラスのdiv要素）に対して背景色を指定しています。

<style type="text/css">
div.cover {
   background-color: #ccffcc; /* 淡い緑色 */
}
div.blockd {
   float: left;
   width: 15%;
}
div.blocke {
   margin-left: 15%;
   background-color: #ffffcc; /* 淡い黄色 */
}
</style>

●表示例

範囲が分かりやすいように枠線と余白を加えています。

短い方の段にも、長い方の段と同じだけ背景色が塗られていますね。

注意すべき点とは？

さて、ここまでは非常に簡単だったと思います。
しかしここで1つ、注意しておかなければならない点があります。

上記でご紹介したソースは、D段（左側の段）が短い場合のものでした。 では、E段（右側の段）が短い場合はどうでしょうか？

上記のソースのまま、短い段をD段からE段に変えた場合（＝D段の方が行数が多い場合）の見え方をご紹介致します。

何やらおかしな表示になりますね。
外側を大きく囲んでいるはずのカバーが、全然足りていません。

「floatプロパティを使って左や右に寄せているブロックレベル要素（段）」の方が（隣の段よりも）長い場合（＝行数が多い場合）には、このような表示になってしまいます。
※最初の例では、「floatプロパティを使って左に寄せているブロックレベル要素」（D段）よりも、隣のE段の方が長かったので、こうはならなかったわけです。

背景色や背景画像がなければ、このままでも特に問題にはなりません。 しかし、背景色や背景画像を付けた段組にしたい場合は、このままでは困りますね。

カバーの長さが不足してしまう問題を解決するには？

それでは、この問題を解決させましょう。
解決策は、2つあります。

…と言ったところで、続きは後編に続きます。

カバーに関する問題点の解決策は次の記事で！ →

【関連記事】

• スタイルシートで段組をデザインする方法シリーズ：
  • 第1回: スタイルシートだけで段組を作る
  • 番外編:スタイルシート段組のメリット
  • 第2回: スタイルシートだけで作る段組の例
  • 第3回: 隣の段が下に回り込むのを防ぐ
• ナビゲーションバーをスタイルシートで装飾
• 初心者応援講座 スタイルシートを使う3つの方法