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

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

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

３列段組みレイアウト（サイド固定横幅コンテンツ可変横幅編）

CSSレイアウト

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

今回は、３列両サイドバー固定横幅コンテンツ可変横幅のレイアウトです。
これは、シリーズで解説している２列右サイドバー固定横幅コンテンツ可変横幅の応用です。
前回の３列パーセント指定横幅のように簡単にはいきません。
とりあえず、以下がサンプルです。

◆ポイント解説

まずは、ポイントのhtml構造とCSS指示です。

・html構造
：
<div id="wrapper">
<div id="contents_container">
：
：
</div>

<div id="left_sidebar_container">
：
：
</div>
</div>

<div id="right_sidebar_container">
：
：
</div>
：
・CSS指示
：
#wrapper {
    width:100%;
    clear:left;
    float:left;
    margin-right:-180px;
}
#right_sidebar_container {
    background-color:#ffcccc;
    width:180px;
    float:left;
}
#contents_container {
    background-color:#ccccff;
    width:100%;
    float:right;
    margin-left:-180px;
}
#left_sidebar_container {
    background-color:#ffcccc;
    width:180px;
    float:right;
}
：

はじめに、wrapperとright_sidebar_containerで右サイドバーの２列左コンテンツ可変横幅右サイドバー固定横幅を行います。
つぎに、wrapper内のcontents_containerとleft_sidebar_containerで左サイドバーの２列左サイドバー固定横幅右コンテンツ可変横幅を行います。
すると、結果的に３列両サイドバー固定横幅コンテンツ可変横幅のレイアウトになるのです。


尚、２列左コンテンツ可変横幅右サイドバー固定横幅は、関連ページの本シリーズを読んでもらえると理解できるようになっています。

関連ページ：