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デザイナー»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/1350
コメントを投稿