FLYING

/* TODO: 気の利いた説明を書く */

よくあるサイトデザインの雛形

xhtml/css

フルCSSで，2段組レイアウトで，ヘッダとフッタがあって，グローバルナビゲーションがあって……みたいなサイトを制作する機会が最近多いのですが，その度にCSSに頭を悩ますのが嫌になったので雛形を作りました。各カラムの横幅は固定で，メインコンテンツ部分が600px，サイドバー部分が200pxになります。グローバルナビゲーションの部分は横幅決め打ち（80px）で，マウスをホバーすると色が変わるようなタイプです。背景画像を設定すればもっとリッチな見栄えになると思います。下記の雛形ソースをそのままモダンブラウザでレンダリングすると次のように表示されます。

当然ながら，IE6やその他の“非”モダンブラウザのことは考慮していないので，実際のサイト制作に利用する場合は注意してください。CSSの記述を適当にカスタムすれば，サイドバーの左側表示や，カラム幅の変更にも対応できると思います。

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Script-Type" content="text/javascript" />
	<title>CSS Sample</title>
	<style><!--
* {
	margin: 0;
	padding : 0;
}
body {
	/*
	 * 全体の背景を設定するならここで
	 */
	background: #eeeeee;
}
#container {
	/*
	 * コンテナをセンタリング
	 */
	margin: 0 auto;
	width: 800px;
}
#header {
	background: #ff6666;
}
#gnavi {
	/*
	 * ここでoverflowを指定することでgnaviの高さが有効になる
	 */
	width: 800px;
	background: #000000;
	overflow: auto;
}
#gnavi ul {
	/*
	 * gnaviをセンタリング
	 */
	margin: 0 auto;
	width: 400px; /* 80px * 5 = 400px */
}
#gnavi li {
	/*
	 * liを横に並べる
	 * インライン要素としてレンダリングすることで
	 * list-style-type: none;する必要がなくなる
	 */
	display: inline;
}
#gnavi li a {
	/*
	 * aをブロック要素としてレンダリング
	 * float: left;で横に並ぶようにする
	 */
	display: block;
	float: left;
	width: 80px;
	color: #ffffff;
	background: #000000;
	text-align: center;
	text-decoration: none;
}
#gnavi li a:hover {
	/*
	 * マウスホバー時の設定
	 */
	color: #000;
	background: #cccccc;
}
#topic-path {
	/*
	 * gnaviのfloatを解除
	 */
	clear: left;
	background: #66ff66;
}
#main {
	/*
	 * ここでoverflowを指定することでmainの高さが有効になる
	 */
	background: #6666ff;
	overflow: auto;
}
#content {
	/*
	 * コンテンツ部
	 */
	width: 600px;
	float: left;
	background: #ffff66;
}
#sidebar {
	/*
	 * サイドバー部
	 */
	width: 200px;
	float: left;
	background: #ff66ff;
}
#footer {
	/*
	 * mainのfloatを解除
	 */
	clear: left;
	background: #66ffff;
}
	//--></style>
</head>
<body>
<div id="container">
	<div id="header">
		<h1>header</h1>
	</div>
	<div id="gnavi">
		<ul>
			<li><a href="#">gnavi1</a></li>
			<li><a href="#">gnavi2</a></li>
			<li><a href="#">gnavi3</a></li>
			<li><a href="#">gnavi4</a></li>
			<li><a href="#">gnavi5</a></li>
		</ul>
	</div>
	<div id="topic-path">
		<p><a href="#">top</a> &raquo;
		<a href="#">content1</a> &raquo;
		<a href="#">content2</a></p>
	</div>
	<div id="main">
		<div id="content">
			<h2>content</h2>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
		</div>
		<div id="sidebar">
			<h2>sidebar</h2>
			<p>sidebar</p>
			<p>sidebar</p>
			<p>sidebar</p>
			<p>sidebar</p>
			<p>sidebar</p>
		</div>
	</div>
	<div id="footer">
		<p>footer</p>
	</div>
</div>
</body>
</html>

追記：201101210356

IE8だと表示が崩れてしまうようなので一部CSSを修正しました。