ヘッダー、フッター、3カラム（固定幅）

ホーム>CSS>CSSサンプル>レイアウト:ヘッダー、フッター、3カラム（固定幅）

この情報はお役に立ちましたか？よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

ヘッダーとフッターの間に3カラムのコンテンツを表示させるレイアウトです。具体的には以下のようなレイアウトになります。

ヘッダー、フッター、3カラム（固定幅）のレイアウト

CSSによるレイアウト例1：通常のCSSによるレイアウト

この方法は、スマートではありませんが、見た目にわかりやすい配置になります。
HTMLのソースは以下のようになります。

<div id="header">ヘッダー</div>
<div id="main">
<div id="left">
<div id="contents">コンテンツ</div>
<div id="menu">左メニュー</div>
</div>
<div id="right">右メニュー</div>
</div>
<div id="footer">フッター</div>

各IDへのCSSの設定は以下のとおりです。

#header{
width:800px;
margin:0px auto 0px auto;
}
#main{
width:800px;
margin:0px auto 0px auto;
}
#left{
width:650px;
float:left;
}
#contents{
width:500px;
float:right;
}
#menu{
width:150px;
float:left;
}
#right{
width:150px;
float:right;
}
#footer{
clear:both;
width:800px;
margin:0px auto 0px auto;
}

CSSとHTMLのレイアウトの解説

このサンプルでは、全体の幅を800pxに固定しています。
ヘッダーとフッターは配置しただけなので、特に問題はありません。marginプロパティのautoを左右に設定すると、ブラウザの中央に表示されます。

中央にくるコンテンツとメニューの配置では、ソースコードのできるだけ上の方にメインコンテンツが来る方が有利である、と言われているSEOの観点を取り入れて、メインコンテンツを先に記述できるようにしています。

3カラムを並列に並べることは、ネガティブマージンを使わない限りできないので、ここでは、一端2ブロックにわけ、一方（left）に左メニュー（menu）とメインコンテンツ（contents）を抱合させ、もう一方に右メニュー（right）を指定します。

leftにはfloat:left、rightにはfloat:rightを指定して、それぞれを並列に並べます。

次に、left内部に配置したメインコンテンツ（contents）にfloat:right、左メニュー（menu）にfloat:leftを指定すると、見た目には冒頭の図のように配置されます。
このときに、SEOの観点から、先にメインコンテンツの記述がくるように、contentsブロックをmenuブロックよりも先に配置しても、floatプロパティの指定により、意図したとおりに表示されます。

なお、確認できた限りでは、Firefox2では、rightブロックが下に落ちてしまい、意図したとおりに表示されません（Firefox3では直っています）。

CSSによるレイアウト例2：ネガティブマージンを使った配置

ネガティブマージンとは、marginの値にマイナスの値を与えることで、反対側にとったマージンを吸収させる方法です。ネガティブマージンを使っても同様のレイアウトを実現できます。

まずは、HTML部分のソースです。

<div id="header">Header</div>
<div id="main">
<div id="contents">Contents</div>
<div id="left">Left</div>
<div id="right">Right</div>
</div>
<div id="footer">Footer</div>

ソースコード上でも中央のカラムをすべて並列に配置しているので、よりスマートな印象を受けます。CSSは以下のように記述します。

#header{
width:800px;
margin:0px auto 0px auto;
}
#main{
width:800px;
margin:0px auto 0px auto;
}
#contents{
width:500px;
float:left;
margin-left:150px;
margin-right:-150px;
}
#left{
width:150px;
float:left;
margin-left:-500px;
margin-right:500px;
}
#right{
width:150px;
float:right;
}
#footer{
clear:both;
width:800px;
margin:0px auto 0px auto;
}

ネガティブマージンを使った配置の解説

ネガティブマージンを使ったレイアウトの最初の配置

CSSを反映していない状態では、上図のような配置になっています。
ここから左メニューを左側に、コンテンツを真ん中にもってくるには、まず、左メニュー分の空間を左側に空けます。
左メニューの幅が150pxのときは、コンテンツのmargin-leftを150pxにします。しかし、このままだと左側にとって150px分の空間は右側に加算されてしまい、表示が変わらなくなってしまいます。そのため、コンテンツのmargin-rightに-150pxを指定して、右側のマージンを左側で取ったマージンの分だけ減らします（下図）。

ネガティブマージンによるレイアウト：メインコンテンツを移動

すると、マイナスにした分の領域に、重なるようにして他のdiv要素が配置されます。

次に、左メニューの右側にマージンをとって、左側に移動させます。
左メニューが配置されている場所は、左から500pxの場所なので、margin-rightに500pxを指定して左側に500px移動させ、その分をmargin-left:-500pxとして吸収します（下図）。

ネガティブマージンによるレイアウト：左メニューを移動

関連リンク

よく読まれている記事

UpDate:2010-3-13