企業HPでよく見る逆L字（2列）テンプレートの汎用的CSSを実装してみた。

css

多分・・・・
暇なんですね、パパは（苦笑）


で、よく企業ホームページとかで実装しているCSSを
なるべく簡潔に実装してみました。
レイアウトは2列+ヘッダ+フッタです。
Dreamweaverの初期テンプレのCSSとかチョイ複雑すぎるんで、
割と初心者向けのCSSです。
使いたい方は勝手に使ってください。

@charset "utf-8";
/* CSS Document */
/* ウエンのパパ風呂 */
body {
	text-align:center;
}
*{
	padding:0;
	margin:0;
}
.html_body {
	width:902px;
	margin: 0 auto;
	float:none;
}
.contents {
	width:901px;
}
.header {
	width:901px;
}
.navigation {
	width:198px;
	float:left;
}
.main_contents {
	width:698px;
	float:right;
}
.footer {
	width:901px;
}


で、表示するHTMLはこんな感じです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>パパが作った汎用的なCSSの例</title>
<link rel="stylesheet" type="text/css" href="Untitled-4.css"/>
</head>
<!-- 
・全体幅　　　　　　900px
・ナヴィゲーション　198px
・メインコンテンツ　698px
（全体センタリング）
-->
<body>
<div class="html_body">
  <div class="header">
  	<!-- ここにヘッダーを記入-->
  </div>
  <div class="contents">
    <div class="navigation">
    	<!--ここにナヴィゲーションを記入-->
    </div>
    <div class="main_contents">
      <!-- ここにメインコンテンツを記入-->
    </div>
  </div>
  <div class="footer">
  	<!--ここにフッターを記入-->
  </div>
</div>
</body>
</html>


ピクセル数とか間違えなければ
ちゃんと表示できるはずですが、保証はなしです。


こんなん作って欲しい！！
というのがあったら言って下さい。
ただ、気まぐれでしか作りません。