12日目 | CSS floatを使った段組レイアウト

授業

floatは情報優先度的に高いものを右側に置くことができるテクニック。
（普通コンピュータの世界では重要なものは左になる）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float練習</title>
<link rel="stylesheet" href="style1b.css" media="screen,print">
</head>
<body>
<div id="container">
  <div id="header">header<br></div>
  <div id="content">content<br></div>
  <div id="sidebar">sidebar<br></div>
  <div id="footer">footer<br></div>
</div>
</body>
</html>

@charset "utf-8";

html, body, div{
	  margin:0;
	　padding:0;
	}
	
body{
	 background-color:#ccc;
	 text-align:center; /*IE6対策*/
	}

#container{
	  width:780px;
	　margin:0 auto; /*上下０、左右が均等なサイズにあく*/
	　padding:10px;
	　background-color:#fff; /* レイアウト全体の幅を指定 */
	  overflow:hidden;	/*外箱containerが内箱header、sidebarによってつぶされるのを防ぐ指定*/
}
#header{
	  background-color:#c2fcfb;
	　height:50px;
	　margin-bottom:10px; /*上でmargin:0;にしてるのでここでは書かなくていい*/
}
#content {
	float: left; /* ボックスを左寄せに指定 */
	width: 500px; /* ボックスの幅を指定 */
	background-color: #f8febc;
	margin-bottom:10px; /*footerのmarginが効かないのでこちらにmarginつける*/
	height:300px;
	/*margin-left:10px*/
}
#sidebar {
	float: right; /* ボックスを右寄せに指定 */
	width: 270px; /* ボックスの幅を指定 */
	background-color: #Fecaff; /*薄いピンク*/
	height:300px;
	margin-bottom:10px;
}
#footer{
	clear:both;
	background-color:#add;
	height:50px;
	/*margin-left:10px;
	margin-right:10px;
	margin-bottom:10px;*/
}
[f:id:hatewemar2012:20121204225604p:image]

ポイント

overflow:hidden;

フロートしたものの外箱に対する指定。
これをしないと外箱に対して内箱がぐちゃっとくっついちゃう。文字が入っているところまでぐちゃっとなっちゃう。

clear:both;

footerにclear:both;で左右の回り込みを解除する。しかしこの指定をすると上下のmarginが効かなくなる。
でもcontent達との間に余白はとりたいのでcontent側にmargin-bottomを設定する。

上と同じレイアウトを自力で実現しようとしたCSS。

margin:0 auto;を知らなかったので、ごりごりmarginを細かく設定してあります。

@charset "utf-8";

#container{
	  width:800px;
		background-color:#CC9; /* レイアウト全体の幅を指定 */
	  overflow:hidden;	/*外箱containerが内箱primary、secondaryによってつぶされるのを防ぐ指定*/
}
#header{
	  background-color:#ccc;
		height:50px;
		margin:10px;
}
#content {
	float: left; /* ボックスを左寄せに指定 */
	width: 500px; /* ボックスの幅を指定 */
	background-color: #C7D5ED; /*薄いブルー*/
	margin-bottom:10px; /*footerのmarginが効かないのでこちらにmarginつける*/
	height:300px;
	margin-left:10px;
	display:inline;
}
#sidebar {
	float: right; /* ボックスを右寄せに指定 */
	width: 270px; /* ボックスの幅を指定 */
	background-color: #F9CFBA; /*薄いピンク*/
	height:300px;
	margin-right:10px;
	display:inline;
}
#footer{
	clear:both;
	background-color:#add;
	height:50px;
	margin-left:10px;
	margin-right:10px;
	margin-bottom:10px;
}


bodyに設定していないのでセンターになっていません。背景グレーでもありません。
しかし一応余白のとり方は合っています。

display:inline;

marginをつけるとIE6の場合は倍になってしまうのだが、それを正常に見せるための設定です。

IE6対策

IE TESTER

これをインストールするとIEの各バージョンでの動作テストができます。もちろんIE6のテストもできます。
さらにDreamweaverのプレビュー用ブラウザとして追加登録すると作業効率がとてもアップします。