燈明日記 このページをアンテナに追加 RSSフィード

ごあいさつ

燈明日記へようこそ!!

燈明日記の主なテーマは、以下の通りです。

そして、燈明日記へ来られたのも『私』と『あなた』の何かのご縁です。なので、どうぞごゆっくりご覧下さい!


2009/3/8(日)

[] 段組みレイアウトの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を指定します。


関連ページ:

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証