【ホームページ作成】CSS段組1：スタイルシートだけで段組を作る方法

段組の解除: clearプロパティ

下図のような構成の場合、「段組の解除」を指定する必要がありますね。（下図の場合だと、コンテンツCの直前で段組を解除しなければなりません。）

段組の解除（回り込みの解除）には、clearプロパティを使います。

例えば、次のように記述します。

<style type="text/css">
div.clearblock {
   clear: both;
}
</style>

これで、このスタイルを適用した要素の上で、すべての回り込みが解除されます。（＝段組が解除されます。）
使用例もご紹介しておきます。

■HTML部分：

<div class="blocka">
   コンテンツA
</div>
<div class="blockb">
   コンテンツB
</div>
<div class="blockc">
   コンテンツC
</div>

■スタイルシート部分：

<style type="text/css">
div.blocka {
   float: left;
   width: 60%;
}
div.blockc {
   clear: both;
}
</style>

このソースを表示すると、次のような構成になります。

終わりに

今回は、スタイルシートだけを使って段組（マルチカラム）を実現する方法をご紹介致しました。

スタイルシートを利用して段組を作るメリットは、単にスタイルシートでデザインできるというだけではありません。ウェブページ（HTML）の構成上でも、大きなメリットがあります。
その方法は、次の記事「常にメインコンテンツを先に記述できる!? スタイルシートの段組のメリット」で解説しています！ こちらもぜひ、併せてご参照下さい。

【関連記事】

• スタイルシートで作る段組のメリット
• CSS段組2：スタイルシートで作る段組レイアウトの例
• CSS段組3：隣の段が下に回り込むのを防ぐ
• CSS段組4：段の背景色が切れないようにする(前編)
• CSS段組4：段の背景色が切れないようにする(後編)
• TABLEを駆使して凝ったデザイン