[PR]

2024-11-2116:46

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

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

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