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

CSS入門3 : フロートボックスで並列の2段組を作成

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

float ボックスがうまく配置されない原因は、ブラウザによって margin の解釈が異なることです。特にWin IE は、バージョンによって左右が2倍で表示されます。左右の margin は float できない原因になりますので、なるべく使わない方が安心です。

1 ： CSSファィルにメインとフッター部分を設定
CSSファィルに、残り3つのボックス設定を追加記述します。
■lesson.css ファイルに記述
/*++レフト++*/
#left {
width: 200px;
height: 300px;/*　ボックスの高さ ※解説用設定　*/
float: left;/*　ボックスが左上に回り込みます　*/
background: #CCFFCC;
}

/*++コンテンツ++*/
#contents {
width: 530px;
height: 300px;/*　ボックスの高さ ※解説用設定　*/
float: right;/*　ボックスが右上に回り込みます　*/
background: #FFCC99;
}

/*++フッター++*/
#foot {
width: 750px;
height: 30px;
clear: both;/*　ボックスの回り込みを解除します　*/
margin-top: 20px;/*　上マージン(余白)　*/
background: #99CCFF;
}
※注意 : /*　説明　*/ は貼付け後削除します。使用する場合セミコロン（ ; ）の後に全角スペースが入るとプロパティが無効になります。
  • left & contents : float で、ボックスの回り込みを設定します。left、right、none の指定ができ、写真やテキストに対しても設定可能です。
    ※重要!! : float : left 設定のボックスは左上に配置され、右側に空きがあれば後続ボックスの写真やテキストが、右側に回り込みます。
    つまり、float 設定されたボックスは表示位置が適応され、継続ボックスにフロートの回り込みを適応します。後続ボックスに float 設定がなくても、継続ボックスの写真やテキストはフロートします。
    また、ボックスをフロートさせる場合は、その前のボックスにも float の設定が必要になります。
    ※注意 : float 設定のボックスは、必ず width で横幅を指定しないと、表示が崩れる原因になります。
  • foot : clear プロパティの both 指定で左右の float を解除します。left、right で一方の float のみ解除することもできます。
    margin-top で、上部に20pxの余白を設定しています。
2 ： PHPファイルにHTMLを記述しブラウザで確認します
残り3つのボックスを PHP ファイルで読み込み、デザインの確認をします。
■lesson.php ファイルの </div><!-- MENU・END --> の下に追加記述
<div id="left"><!-- LEFT -->
レフト
</div><!-- LEFT・END -->

<div id="contents"><!-- CONTENTS -->
コンテンツ
</div><!-- CONTENTS・END -->

<div id="foot"><!-- FOOT -->
フッター
</div><!-- FOOT・END -->
※タグとタグの間の空行は、分かりやすくするために入れています。
※<!-- LEFT --> <!-- LEFT・END --> はdiv要素の始まりと終了を、分かりやすくするために入れた説明です。
ここで再度、ページ記事をプレビューで確認します。下の画像のいずれかで表示されていれば成功です。
画像は左上から時計回りで Safari、MSIE 5.5、Opera、MSIE 7.0 のプレビューです。
ブラウザによって HTML の解釈が微妙に異なるため、foot 上部の margin が適応されなかったり、左上に配置されたりしています。これが現状では正しい表示です。
次は、プラウザによって表示が違う問題を解決します。
▲ PAGE TOP