授業メモ　5月10日

講義メモ

divの使い方 : レイアウト基本

<body>
<div id="container">
<div id=header>header</div>
<div id="wrapper">
<div id="content">content</div>
<div id="sidebar">sidebar</div>
</div>
<div id="footer">footer</div>
</div>



<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>floatの練習(1)</title>
<style type="text/css">
<!--
body {
	background-color: black;
}
#wrapper {
	width: 700px;
	height: auto;
	background-color: white;
	
	margin: 20px auto;
}
#content {
	background-color: blue;
	float: left;
	width: 450px;
	height: 300px;
	margin:0 50px 20px 0; 
}
#sidebar {
	background-color: red;
	width: 200px;
	float: right;
	height: 300px;
}
#header {
	width: 700px;
	height: 100px;
	background-color: green;
}
#footer {
	width: 700px;
	height: 100px;
	background-color: yellow;
	clear: both;
}
#container {
	background-color: gray;
	width: 700px;
	height: auto;
	margin: 50px auto;	
}
-->
</style>
</head>

<body>
<div id="container">
<div id="header">header</div>
<div id="wrapper">
<div id="content">content</div>
<div id="sidebar">sidebar</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>

  • overflowはIE6以前のものに対するおまじない
  • カラム落ちは計算の間違いだけ
  • marginの左右をautoにすると画面の中心に来る
  • wrapperの幅は960pxが基準（昔は640px,760px）
  • contentから作る、(情報の優先順位)
  • 内部リンクは相対パスを指定する
  • 冷たい飲み物は青いパッケージ