ページレイアウトに使えるCSSプロパティ

クロスブラウザなレイアウトデザインテクニック 第6回

clearプロパティ

　floatプロパティで左や右にフロートされたボックスの回り込みを解除するには、clearプロパティを利用し、解除方向を「left」「right」「both」などの値で指定します。

clearプロパティの値

値	説明
none	初期値。回り込みを解除しない。
left	左にフロートされた要素に対する回り込みを解除。左にフロートされたボックスよりも下に新たなボックスを生成して表示。
right	右にフロートされた要素に対する回り込みを解除。右にフロートされたボックスよりも下に新たなボックスを生成して表示。
both	左右両側にフロートされた要素に対する回り込みを解除。左右にフロートされたボックスよりも下に新たなボックスを生成して表示。

　次の例では、右にフロートされた画像に対するテキストの回り込みを解除しています。

［リスト3］XHTMLソース／02.html

<p>
  <img src="sample.gif" alt="サンプル" />
  サンプル画像は、「<strong>float:right</strong>」に指定されています。このテキストは、サンプル画像の後に続く内容です。
</p>
<p class="new_par">
  2つ目の段落のテキストです。「<strong>clear: right</strong」と指定して、回り込みを解除しています。右にフロートされたボックスよりも下に、新たなボックスを生成して表示されます。
</p>

［リスト4］CSSソース／02.css

img {
  width: 200px;
  height: 200px;
  float: right;
}
.new_par {
  clear: right;
}

図2：「clear:right」の実行結果

　これらfloat、clearの各プロパティを利用して、段組レイアウトを実現することもできます。次の例のように、サイドバーを左にフロート、メインを右にフロートさせ、後続のフッタで回り込みを解除する、といった仕組みで利用します。

［リスト5］XHTMLソース

/* サイドバーを左フロート */
#sub {
  width: 30%;
  float: left;
}
/* メインを右フロート */
#main {
  width: 70%;
  float: right;
}
/* フッタでフロート解除 */
#footer {
  clear: both;
}

図3：floatプロパティによる段組レイアウト

　floatプロパティによる段組レイアウトは、比較的簡単に実現することができますが、サイドバーやメインのボックスの高さについては、それぞれの内容量に依存します。そのため、左右のボックス間に段差が生じ、図4のように、特に背景色が指定されている場合に、高さが不足しているような印象を与えてしまうことがあるので注意しましょう（解決方法については次回の記事の中で扱う予定です）。

図4：サイドバー（#sub）の内容量が少ない例