CSS

段組

以前ならテーブルを使用していた段組です。CSSでは回り込み(floatプロパティ)を使います。よく使う例として、左側にメニュー、右側に本文といった表示にも使用します。

左側のコンテンツです。HTML側は左側のコンテンツ部を<div>タグでクラスセレクタ、またはidセレクタで範囲指定します。サンプルのWebページでは<div class="sample1Block1">〜</div>までが左側の範囲です。

floatプロパティは便利な反面、float命令で範囲づけられた部分がブラウザによって解釈が異なるというWeb作成者泣かせなところがあります。何度泣いた事やら・・・

floatプロパティを使用する場合は、widthプロパティで範囲指定が必須となります。

右側のコンテンツです。HTML側は右側のコンテンツ部を<div>タグでクラスセレクタ、またはidセレクタで範囲指定します。サンプルのWebページでは<div class="sample1Block2">〜</div>までが右側の範囲です。

widthプロパティは、例えば右50%、左50%のようにするとブラウザによってはきちんと回り込まないことがあります。実際より少なめに指定した方がいいです。

段組が終わったら、回り込み解除(clear:both)をすることを忘れないようにします。

左側のコンテンツ部の設定部分です。回り込みを左に、幅を35%に指定しています。枠線や余白(margin/padding)はお好みで指定します。

右側のコンテンツ部の設定部分です。回り込みを「左」に、幅を55%に指定しています。枠線や余白(margin/padding)はお好みで指定します。

回り込みを「解除」しています。

3段組も同じ方法です。W3Cのトップページも3段組になっています。少し違うところは回り込みを解除する方法で、hrタグを非表示にし、回り込みを解除しています。

3段組の場合は3つの段組とも同じ幅にしてみました。楽勝なので試しにoverflow:autoプロパティでブロックレベル要素(段組された範囲)からテキストがはみ出た場合に、スクロールバーを表示するか/しないかを指定してみました。

左側のコンテンツです。HTML側は左側のコンテンツ部を<div>タグでクラスセレクタ、またはidセレクタで範囲指定します。サンプルのWebページでは<div class="sample2Block">〜</div>までが左側の範囲です。

中央のコンテンツです。floatプロパティは便利な反面、float命令で範囲づけられた部分がブラウザによって解釈が異なるというWeb作成者泣かせなところがあります。何度泣いた事やら・・・

floatプロパティを使用する場合は、widthプロパティで範囲指定が必須となります。

右側のコンテンツです。HTML側は右側のコンテンツ部を<div>タグでクラスセレクタ、またはidセレクタで範囲指定します。サンプルのWebページでは<div class="sample2Block">〜</div>(3つの段落共通クラスセレクタ)までが右側の範囲です。

で、ここは、回り込みを解除した領域になります。

3段組共通のクラスセレクタです。

回り込みの解除です。