小池啓仁 ヒロヒト応援ブログ By はてな

小池啓仁（コイケヒロヒト）の動画など。

小池啓仁 ヒロヒト応援ブログ By はてな

段組みレイアウトのCSS解説

CSSレイアウト

解説第四弾です。
本コンテンツは、以下のページのHTML/CSSソースを解説しています。


今回は、段組みレイアウトのCSS解説です。
段組みレイアウトは、floatプロパティやpositionプロパティを使う方法がありますが、今回はfloatプロパティを使います。
また、本ソースは「Summary layout」と「detail layout」分けてあり、今回は 「Summary layout」の所を解説します。
尚、本コンテンツを読みこなすには、スタイルシートの基本的な知識が必要です。
また、スタイルシートのリファレンスで調べないとならないかもしれません。
以下は、そんな人のための『スタイルシート概説リファレンス』です。

今回解説のソース引用

<style type="text/css">
/*--- Summary layout ---*/
* {
    margin:0;
    padding:0;
    border-width:0;
}
body {
    text-align:center;
}
#main_container {
    width:96%;
    margin-left:auto;
    margin-right:auto;
    margin-top:1em;
    text-align:left;
}
#header_container {
    background-color:#ffffcc;
}
#menubar_container {
    background-color:#eeffff;
}
#contents_container {
    background-color:#ccccff;
    width:100%;
    clear:left;

    margin-right:-200px;
/*    margin-left:-200px; */
    float:left;
/*    float:right; */

}
#for_ie_wrapper {
    margin-right:200px;
/*    margin-left:200px;  */
}

#sidebar_container {
    background-color:#ffcccc;
    width:200px;
    float:left;
}
#footer_container {
    background-color:#ccffcc;
    width:100%;
    clear:both;
}
http://d.hatena.ne.jp/chaichanPaPa/20090214/1234611010

まず、はじめにすべての要素のマージンとパディングとボーダー（margin:0; padding:0;　border-width:0;）をなし（ゼロ）にします。
これは、スタンダードモードとクワークスモードで同じように表示（レイアウト）させるためのもので、クワークスモードでは、本来のwidthとheightの長さに対して、パディングとボーダーの長さが余分に加算されるので、値をゼロにするわけです。
あと、マージンまでゼロにするのは、マージンがあるとレイアウトの計算に誤差が発生し、予想不可能な事態になったり、まぁ、ゼロにしとくとなにかとレイアウトがし易いのです。

 * {
    margin:0;
    padding:0;
    border-width:0;
}

つぎに、body要素に対して「text-align:center;」をします。
これは、IE対策で、これをしないとIEでは、子要素のブロックレベル要素をセンタリングしません･･･。

body {
    text-align:center;
}

「#main_container」では、横幅（width）を96%にして、左右マージンを自動（auto）にし、本要素をセンタリングします。
「text-align:left;」をしているのは、IE対策で、body要素に対して「text-align:center;」をしているのを元にもどしています。

#main_container {
    width:96%;
    margin-left:auto;
    margin-right:auto;
    margin-top:1em;
    text-align:left;
}

これは、body要素に対して「text-align:center;」をしたことにより、ブロックレベル要素はセンタリングが必要ですが、インライン要素（テキスト等）はセンタリングが不要なためです。


「#header_container」と「#menubar_container」は、レイアウトを見やすくするために、とりあえず要素に色をつけています。

#header_container {
    background-color:#ffffcc;
}
#menubar_container {
    background-color:#eeffff;
}

「#contents_container」は、自身を左側にフロートさせ、サイドバーを表示するためのスペースを確保するために、右ネガティブマージン（マイナスマージン　-200px）しています。
普通、マージンは内容領域の外側にとるものですが、ネガティブマージンは内容領域の内側にとり、ある意味、内容領域を少なくすることなのです。
尚、「clear:left」しているのは、メニューバーコンテナーのli要素で「float:left;」しているのを解除しています。

#contents_container {
    background-color:#ccccff;
    width:100%;
    clear:left;

    margin-right:-200px;
/*    margin-left:-200px; */
    float:left;
/*    float:right; */

}

「#for_ie_wrapper」は、親要素のcontents_containerで右ネガティブマージンした分、右マージンして相殺しています。
本当は子要素セレクタ「#contents_container>*」をしたいのですが、IEでは無視されます（Firefoxは大丈夫）。ですので、しかたがなく、こうしています。

#for_ie_wrapper {
    margin-right:200px;
/*    margin-left:200px;  */
}

「#sidebar_container」は、自身を左側にフロートさせ、横幅を固定の200pxにしています。
しかし、前の要素も左側フロートなので、結果的に右側に回りこみ、段組レイアウトになるわけです。

#sidebar_container {
    background-color:#ffcccc;
    width:200px;
    float:left;
}

なぜ、左側フロートさせているのに右側にレイアウトするかというと･･･。
「float:left」は、ブロックレベル要素を左側に寄せ、後に続く要素を右側に回り込ませるもなのです。


「#footer_container」は、フロートを解除させています。
本当は、今回は「clear:left」なのですが、rightの時を考慮してbothとしときます。

#footer_container {
    background-color:#ccffcc;
    width:100%;
    clear:both;
}


尚、float指定した要素には、仕様的に必ずwidthを指定します。

関連ページ：