【Web制作】 nカラムのレイアウトを作る

2カラム

2カラムのレイアウトを作る方法について。

HTMLとCSSを次のように書きます。

2カラムのレイアウトのHTML
<div id="container">
<div id="main">
Main Column
</div>
<div id="sub">
Sub Column
</div>
</div>
2カラムのレイアウトのCSS
#container {
    clear: both;

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

#main {
    /* サイドバーが左の場合に書く */
    float: right;

    /* サイドバーが右の場合に書く */
    float: left;

    width: 720px;
}

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

widthは適当な値に変更して下さい。

3カラム

3カラムのレイアウトを作る方法について。

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

HTMLとCSSを次のように書きます。

3カラムのレイアウトのHTML
<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>
3カラムのレイアウトのCSS
#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;
}

widthは適当な値に変更して下さい。

カテゴリー

inserted by FC2 system