サイトにカラムレイアウトを作る

2010-06-1021:45

HTMLとCSSでカラムレイアウトを作る方法について。

2カラム

2カラムのレイアウトは次のHTMLとCSSで作れます。

<div id="container">
<div id="main">
Main Column
</div>
<div id="sub">
Sub Column
</div>
</div>

#container {
    clear: both;

    /* mainのwidth + subのwidth */
    width: 960px;
}

#main {
    /* 左サイドバーの時のみ記述 */
    float: right;

    /* 右サイドバーの時のみ記述 */
    float: left;

    width: 720px;
}

#sub {
    float: left;
    width: 240px;
}

cssのwidthはサイトに合わせて好みの値に変更して下さい。

3カラム

3カラムのレイアウトを作る場合です。

中央にメインコンテンツ、左右にサイドバーがあるレイアウトを想定しています。

このレイアウトを作る場合は次のようにHTMLとCSSを書きます。

<div id="container">
<div id="wrapper">
<div id="main">
Main Column
</div>
<div id="sub">
Sub Column
</div>
</div>
<div id="extra">
Extra Column
</div>
</div>

#container {
    clear: both;

    /* mainのwidth + subのwidth + extraのwidth */
    width: 960px;
}

#wrapper {
    float: left;

    /* mainのwidth + subのwidth */
    width: 800px;
}

#main {
    float: right;
    width: 640px;
}

#sub {
    float: left;
    width: 160px;
}

#extra {
    float: left;
    width: 160px;
}

cssのwidthはサイトに合わせて好みの値に変更して下さい。