1カラムフィックスレイアウト【css tips】

もっとも単純なレイアウトになります。

イメージはこのような感じ。

1karamu.gif

(x)hmtlで記述すると

<div id="container">
　<div id="header">
　　#header
　</div>
　<div id="main">
　　#main
　</div>
　<div id="footer">
　　#footer
　</div>
</div>

このような感じになります。

これにCSSでレイアウトを行うと

*{
　margin: 0;
　padding: 0;
　font-style: normal;
　font-weight: normal;
　font-size : 100%;
}
body{
　text-align:center;
}
div#container{
　text-align:left;
　margin:0 auto;
　width:700px;
}
div#header{
　width:100%;
　background:#DBFF4A;
}
div#main{
　width:100%;
　height:300px;
　background:#3CFF6C;
　margin:2px 0;
}
div#footer{
　width:100%;
　background:#DBFF4A;
}

このような感じになります。

サンプル

とくにテクニックらしいテクニックは使っていませんが、*を使いスタイルを初期化しています。

また、中央に配置する為にdiv#containerの左右のマージンにautoを設定しています。(ただしIE6ではこの指定が反映されませんのでIE6で中央に配置する為する為にbodyに対して、　text-align:center;を指定し、それによりdiv#containerのオブジェクトが中央に表示されるのを防ぐ為に、div#containerに対してtext-align:left;を指定しています。

スポンサードリンク

«ページをレイアウトする。【css tips】 | メイン | webデザイナー»