●コンテンツ内容

●CSSを利用した段組み[1]

 CSS2の仕様には、段組み専用のプロパティはありませんが、工夫次第で段組みのようなレイアウトは可能です。(バグさえ、気にしなければ・・・。)ここでは、floatプロパティの値に leftを使い、div要素に適用して段組みを作ります。わかりやすいように2つの div要素にボーダーを指定し、それぞれ違う色を付けました。また、段落を作る div要素それぞれに widthプロパティで任意の幅を指定します。

【CSS】↓

.waku1 {
  float: left;
  border: solid 4px #ff00ff;
  width: 200px;
}
.waku2 {
  border: solid 4px #008000;
  width: 50%;
  margin-left: 220px;
}

【HTML】↓

<div class="waku1">divの要素内容</div>
<div class="waku2">divの要素内容</div>

【解説】↑↓

 注意する点として、floatプロパティは左右のどちらかにテキストまたは要素を回り込ませるプロパティですが、divや p要素などブロック要素を回り込ませた場合、ブロック(ボックス)そのものが回り込まない点に注意してください。回り込むのはテキストなどの内容領域です。例えば、回り込んだ要素にボーダーを指定すると Win IEのブラウザでは上手く表示されていますが、Nスケープ(Ver.7.1利用)で確認すると、ボーダーが左の div要素と重なっています。これを回避するには対象となる左の div要素の幅以上のマージン(margin)を設ける必要があります。

※この指定方法の欠点としては、Win IE(Ver.6.0で確認)のブラウザ環境で表示幅を狭めた場合、左ブロックの高さの分だけ右ブロックが真下に下がってしまうことです。

 XHTML/CSS・目次 | 配置と表示・目次

Copyright (C) 2005-2007 http://www.xml.vc/