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

2010-06-1021:45

コンテンツを列で分割するカラムレイアウトを実現する方法について。

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はサイトに合わせて好みの値に変更して下さい。