| ■ スタイルシートファイルへの記述 |
|
 ソース
* { margin: 0; padding: 0; }
#mainbody { width: 600px; }
.box_a { float: left; width: 400px; background: #bdb76b; height: 300px; }
.box_b { float: left; width: 200px; background: #eee8aa; height: 300px; }
|
| margin 要素、padding 要素 は、CSS レイアウトにおいて、カラム落ちし易くなったり、何かと不具合が多いので、すべての要素に、0px を指定しておきます。 |
mainbody で、一番外側の枠を作成します。
上記の例では、mainbody の横幅 600px の中に box_a ( 横幅 400px) と box_b ( 横幅 200px ) 2 つの内枠を作成しています。 |
| 表示の便宜上、box_a、box_b に、高さ300p、背景色を指定しています。 |
|
|
| ■ HTMLファイルへの記述 |
ソース
<div id="mainbody" align="center">
<div class="box_a">box_a</div>
<div class="box_b">box_b</div>
</div> |
mainbody の間に、box_a、box_b を配置します。
mainbody に指定した align="center" は、表示の便宜上テキストを中央揃えで表示する為に指定しています。 |
| 最も注意する点は、各内枠の内容がスタイルシートで指定した横幅を超えないようにする点です。特に、内容に table要素を使う場合は注意して下さい。 |
⇒ 失敗例
box_b の内容で、table要素に、201px を指定しています。1px程度の僅かな誤差は修正して正常に表示してくれるブラウザもありますが、内容のサイズが枠を超える事は、カラム落ちの最たる原因ですので、最善の注意を払いましょう。 |
|
| ■ HTMLファイルへの記述 応用 |
ソース
<div id="mainbody" align="center">
<div class="box_a">box_a</div>
<div class="box_b">box_b</div>
<div class="box_b">box_b</div>
<div class="box_a">box_a</div>
</div> |
| box_a、box_b を 2段にしてみました。⇒ 完成ページ ( 新規ウィンドウが開きます ) |
|
|
|
|
|
|
スタイルシート( CSS ) 実践 2 カラムレイアウト