CSS Lesson
フル CSS のレイアウトを実例をもとに解説しています。正しい文書構造、W3C 推奨に準拠していない場合もありますのでご了承ください。
※解説は WordPress インストール済みの環境を前提にしています。

CSS入門5 : レイアウトを3段組みに変更する

CATEGORY : CSS段組レイアウト入門 | UPDATE : 2009.01.10

メニューを左右に表示する3段組みのレイアウトの場合、レフト、センター、ライトボックスを float:left と margin を使って配置することも可能ですが、レイアウトが崩れてしまう場合が多いようです。
この場合レフトとセンター、又はセンターとライトボックスを大きなボックスで囲むようにすれば、レイアウト崩れを防げます。

1 ： メインのボックスを3段組みに変更するCSSの設定
CSS ファィルの left と contents ボックスの左右サイズを変更し、新たに center と right ボックスを追加します。
■lesson.css ファイルの変更と追加記述
/*++レフト++*/
#left {
width: 150px;
height: 300px;/*　ボックスの高さ ※解説用設定　*/
float: left;/*　ボックスが左上に回り込みます　*/
background: #CCFFCC;
}

/*++コンテンツ++*/
#contents {
width: 580px;
height: 300px;
float: right;/*　ボックスが右上に回り込みます　*/
}

/*++ライト++*/
#right {
width: 150px;
height: 300px;
float: right;/*　ボックスが右上に回り込みます　*/
background: #CCFFFF;
}

/*++センター++*/
.center {
width: 410px;
height: 300px; float: left;/*　ボックスが左上に回り込みます　*/
background: #FFCC99;
}
  • レフトとコンテンツボックスの横幅を変更し、コンテンツボックスの背景色を削除します。新たにライトとセンターボックスの設定を追加します。
  • センターボックスはPHPテンプレートで複数回使用する可能性が高いので、ドットで始まるクラスセレクタで設定します。
2 ： 3段組みの設定を読み込むPHPファィルの記述
センターとライトボックスはコンテンツボックス内に読み込むので、<div id="contents">と</div>の間に記述します。
■lesson.php ファイルに追加記述
<div id="contents"><!-- CONTENTS -->
<div class="center"><!-- CENTER -->
センター
</div><!-- CENTER・END -->
<div id="right"><!-- RIGHT -->
ライト
</div><!-- RIGHT・END -->
</div><!-- CONTENTS・END -->
PHPテンプレートの記述が済んだら、ページ記事をプレビューで確認します。3段組みで表示されれば完成です。
▲ PAGE TOP