position3カラムサンプルソース

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

position3カラムサンプルソース

dangumi3.gif(699 byte)

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

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

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

CSS

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

HTML

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

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

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

▲Top

【２】ヘッダー部分

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></div>
</div>++++++++++wrapperの終り

段組解説図

▲Top

【３】container部分コンテンツとサイドバーの基点

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

コンテナー部分を【id名/#container】としました。
幅を【100%】指定します。
以降を【positionプロパティ】で指定するための基点ボックスです。
【position】プロパティで【relative】を指定します。
最後にボックスを3つ<div id="container"></div>の中に移動します。コンテンツ用とサイドバー用です。

なぜ？囲むのか。下記サンプルのような場合を想定しています。【position：absolute】は他のボックスとは独立して配置している点に注意が必要です！

CSS

#container{
position:relative;
width:100%;
}

HTML

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

段組解説図

#containerを指定しない場合のサンプル表示 *サンプルは左サイドバーですが同じことです。

段組解説図

▲Top

【４】左サイドバー部分

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

左サイドバー部分を【id名/#left_sidebar】としました。
幅を【180px】指定します。
【position】プロパティで【absolute】を指定し、上方向に0px　左方向に0pxで配置指定します。

CSS

#left_sidebar{
padding:0px;
margin:0px;
width:180px;
position:absolute;
left:0px;
top:0px;
}

HTML

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

段組解説図

▲Top

【５】コンテンツ部分

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

コンテンツ部分を【id名/#contents】としました。
幅を【440px】指定します。
【position】プロパティで【absolute】を指定し、上方向に0px　左方向に180pxで配置指定します。（左サイドの幅分です）

なぜ【幅440px】なのか？

左サイドバーを【幅180px】としたという事は、通常の場合【右サイドバーも180px】にする事が多いです。よって、全体の【幅800px】から両サイドバー分の【幅360px】を引いたものが【440px】というわけです。

通常はそうなのですが、【左サイドが200px】【右サイドが150px】でもOKです。その場合は【800px－200px－150px＝450px】がコンテンツ部分の幅になります。

因みに、今回は【余白】は全く考えていませんが、必要な場合は全体の幅（ココでは800px）を超えないように指定して下さい。

CSS

#contents{
padding:0px;
margin:0px;
width:440px;
position:absolute;
top:0px;
left:180px;
}

HTML

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

段組解説図

▲Top

【６】右サイドバー部分

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

右サイドバー部分を【id名/#right_sidebar】としました。
幅を【180px】指定します。
【position】プロパティで【absolute】を指定し、上方向に0px　左方向に620pxで配置指定します。

【position：absolute】で左方向に620pxとしたのは、左サイドバーの幅180pxとコンテンツ部分の幅440pxをたしたものです。

CSS

#right_sidebar{
padding:0px;
margin:0px;
width:180px;
position:absolute;
left:620px;
top:0px;
}

HTML

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

段組解説図

▲Top

【７】フッター部分

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

さて！ここで問題が発生します。繰り返しになりますが【position:absolute】で指定したボックスは他のボックスとは独立した存在（配置）でしたね。

取りあえず、通常の方法で【フッター】を配置したサンプルを見てください。その方が解りやすいと思います。

フッター部分を【id名/#footer】としました。
【#container】で全体の幅を【800px】と固定したので、特に【#footer】の幅指定はしません。
著作権表示部分（copyright）になるので、文字の中央寄せを指定しておきます。

通常配置サンプル*サンプルは左サイドバーですが同じことです。

段組解説図

CSS

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

HTML

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

では、解決策を２パターン

１：シンプルパターン

もっとも簡単ですが、人によっては嫌うレイアウトかも知れません。【#footer】を【#contents】の中に入れてしまいます！

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

フッター部分を【id名/#footer】としました。
特に【#footer】の幅指定はしません。
文字の中央寄せを指定しておきます。

CSS

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

HTML

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

段組解説図

以上で完成です。好き嫌いが出そうですね！

２：【#contents】【#left_sidebar】【#right_sidebar】をまたぐ普通のタイプ

一応、普通のタイプのように出来ますが、注意が必要です！

【#contents】の内容が左右サイドバーより常に多い事。（つまりレイアウト上【#contents】の高さが常に【#left_sidebar】【#right_sidebar】の高さを上回る事→【#left_sidebar】【#right_sidebar】は【#contents】の高さを超えてはいけない！）
ズバリ!!これは【position:absolute】を使う際の宿命と思って下さい。

以上の点に注意して進みます。今までのCSSの指定を若干変えます。

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

フッター部分を【id名/#footer】としました。
特に【#footer】の幅指定はしません。
文字の中央せを指定しておきます。
CSSの【#contents】部分の【position】指定を全て削除します。
変わりに【#contents】部分のマージン指定で左に180pxの余白を指定します。

意味が解るでしょうか？【#contents】部分の【position】指定を削除した事により【#contents】は通常のボックス配置にもどりました。【#left_sidebar】【#right_sidebar】はそのまま【position:absolute】を指定してありますから、重ならないように通常の【margin】指定で左側に【180px】の余白を設けたわけです。

また、【#contents】が通常のボックス配置にもどった事により、【#footer】は【#contents】を基点として上手く配置できるわけです。

最後に、【#left_sidebar】【#right_sidebar】の高さは【#contents】の高さを超えてはいけない事を忘れないで下さいね。

CSS

#contents{
padding:0px;
margin:0px 0px 0px 180px;
width:440px;
}

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

HTML

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

段組解説図

因みにサイドバー部分のボリュームが多くなるとこうなります

段組解説図

以上。

▲Top