float3カラムサンプルソース

現在地: Home » 初級ホームページ作成講座：目次 » 速習CSSレイアウト解説：float3カラム

float3カラムサンプルソース

レイアウトサンプル図

【1】全体を囲む枠組を作成

CSS/#wrapper
HTML/<div id="wrapper">

全体を囲む大外枠を【id名/#wrapper】としました。
全体の幅を【800px】で固定してます。
画面の中央に寄せる為にマージンを{margin:0px auto;}と指定します。
【auto】はボックスを中央寄せにする為の指定とでも考えて下さい。
（注）中央寄せにする場合、古いブラウザへの対応でスタイルシートで【body】の指定を【text-align:center;】として下さい。
なぜ【#wrapper】で囲むのか？中央に一括配置する為です。

CSS

#wrapper{
padding:0px;
margin:0px auto;
width:800px;
}

HTML

<div id="wrapper"></div>

上記指定が完了したら、HTMLの<div id="wrapper"></div>の中にボックス【div】を5つ入力します。

<div id="wrapper">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>++++++++++wrapperの終り

【２】ヘッダー部分

CSS/#header
HTML/<div id="header">

ヘッダー部分を【id名/#header】としました。
【#wrapper】で全体の幅を【800px】と固定したので、特に【#header】の幅指定はしません。
高さだけ【150px】としました。

CSS

#header{
padding:0px;
margin:0px;
height:150px;++++++++++高さのみ指定
}

HTML

<div id="wrapper">
<div id="header">　</div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>++++++++++wrapperの終り

段組解説図

【３】左サイドバー部分

CSS/#left_sidebar
HTML/<div id="left_sidebar">

左サイドバー部分を【id名/#left_sidebar】としました。
幅を【180px】指定します。
【float】で {float:left;} を指定します。（左側へ配置）

CSS

#left_sidebar{
padding:0px;
margin:0px;
width:180px;
float:left;++++++++++左へ配置
}

HTML

<div id="wrapper">
<div id="header">　</div>
<div id="left_sidebar">　</div>
<div></div>
<div></div>
<div></div>
</div>++++++++++wrapperの終り

段組解説図

【４】コンテンツ部分

CSS/#contents
HTML/<div id="contents">

コンテンツ部分を【id名/#contents】としました。
幅を【440px】指定します。
【#left_sidebar】を幅180pxと指定したので、右サイドバー部分も幅を180pxと指定します。よって、全体の幅【800px】から左右のサイドバーの幅【360px】を引いた残り【440px】が【#contents】の幅となりました。
【float】で {float:left;} を指定します。（#left_sidebarの右側へ配置）

CSS

#contents{
padding:0px;
margin:0px;
width:440px;
float:left;++++++++++#left_sidebarの隣に配置
}

HTML

<div id="wrapper">
<div id="header">　</div>
<div id="left_sidebar">　</div>
<div id="contents">　</div>
<div></div>
<div></div>
</div>++++++++++wrapperの終り

段組解説図

【５】右サイドバー部分

CSS/#right_sidebar
HTML/<div id="rightt_sidebar">

右サイドバー部分を【id名/#right_sidebar】としました。
幅を【180px】指定します。
【float】で {float:left;} を指定します。（#contentsの右側へ配置）

CSS

#right_sidebar{
padding:0px;
margin:0px;
width:180px;
float:left;++++++++++#contentsの隣に配置
}

HTML

<div id="wrapper">
<div id="header">　</div>
<div id="left_sidebar">　</div>
<div id="contents">　</div>
<div id="right_sidebar">　</div>
<div></div>
</div>++++++++++wrapperの終り

段組解説図

【６】フッター部分

CSS/#footer
HTML/<div id="footer">

フッター部分を【id名/#footer】としました。
【#wrapper】で全体の幅を【800px】と固定したので、特に【#footer】の幅指定はしません。
著作権表示部分（copyright）になるので、文字の中央寄せを指定しておきます。
回り込み指定【float】の解除{clear:both;}を指定します。

CSS

#footer{
padding:0px;
margin:0px;
text-align:center;
clear:both;
}

HTML

<div id="wrapper">
<div id="header">　</div>
<div id="left_sidebar">　</div>
<div id="contents">　</div>
<div id="right_sidebar">　</div>
<div id="footer">　</div>
</div>++++++++++wrapperの終り

段組解説図

以上で完成です。

高性能サーバ

低価格サーバ

無料ホームページスペース