感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

2段組の固定レイアウトを作成するCSS

<スポンサーリンク>

1.デモ

まずはデモ画面から。
こんな感じで、コンテンツとサイドバーがあるようなレイアウトをどうやって作るかをみていく。
f:id:sho322:20140131220251j:plain

2.サンプル

まずはサンプルに使うHTMLから。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>二段組の固定レイアウト</title>
<link rel="stylesheet" type="text/css" href="./css/sample.css">
</head>
<body>
<div id="container">
	<div id="header">
		<p>ここはヘッダーです。</p>
	</div>

	<div id="content">
		<p>ここがコンテンツ部分</p>
	</div>

	<div id="sidebar">
		<p>サイドバー</p>
	</div>

	<div id="footer">
		<p>ここはフッター</p>
	</div>

</div>
</body>
</html>

このペラのHTMLファイルを、上で見たデモのように配置していきたい。
そのためには、以下のようなCSSファイルを読み込む。

#container {
	width: 700px; /* 全体の横幅*/
	margin: auto; /* コンテナのまわりの余白のサイズ */
	border: medium solid DeepPink; /* わかりやすくするためにピンクで囲む */
}
#header {
	width: 700px;
	clear: both;
	border: medium solid Black;
}

#content {
	width: 500px;
	height: 300px;
	float: left; /* コンテンツの配置 */
	margin: 10px 0; /* ヘッダとのすきまの部分 */
	border: medium solid Blue;
}

#sidebar {
	width: 185px;
	height: 300px;
	float: right; /* コンテンツの配置 */
	margin: 10px 0; /* ヘッダとのスキマの部分 */
	border: medium solid DarkSlateBlue;
}

#footer {
	clear: both;
	border: medium solid Black;
}

わかりやすいように、それぞれのコンテンツに枠をつけた。

3.参考にした本

XHTML/HTML+CSSスーパーレシピブック

XHTML/HTML+CSSスーパーレシピブック

この本の22ページ目を参考にして、自分で枠をつけたりしてみた。
この本には様々な「レシピ」が載っていて、こんなのを作ってみたい!と思ったときにサッと開くと助かることがとても多い。