授業日誌　5/14 - masayan-webの日記

floatの確認テスト
<?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; cyarset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>確認テスト</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
color: #fff;
background-color: #ccc;
font-family: "ヒラギノ角ゴ Pro W3", 
	  "Hiragino Kaku Gothic Pro", 
	  "メイリオ", 
	  Meiryo, 
	  Osaka, 
	  "ＭＳ Ｐゴシック", 
	  "MS PGothic", 
	  sans-serif;
}
#container {
background-color: yellow;
width: 800px;
height: auto;
margin: 0 auto;
padding: 10px;
overflow: hidden;
}
#header {
background-color: #a3bed5;
width: 760px;
height: 100px;
margin: 10px ;
padding: 10px;
}
#sidebar {
background-color: #9cc56e;
width: 200px;
height: auto;
margin: 10px ;
padding: 10px;
float: left;
}
#content {
background-color: #dcd78a;
width: 520px;
height:290px;
margin:10px 0 10px 10px;
padding: 10px;
float:left
}
#footer {
background-color: #e0b9d2;
clear: both;
width: 780px;
height: 50px;
margin: 0 10px 10px;
}
#footer address {
text-align: center;
padding-top: 15px;
}
</style>
</head>
<body>
<div id="container">
		<div id="header"><h1>ここにサイトタイトルを入れる</h1></div>
	<div id="wrapper">
		<div id="sidebar">
		<ul>
		<li><img src="images/0509.jpg" width="200px" height="80px" alt="バナー"/></li>
		<li><img src="images/0509.jpg" width="200px" height="80px" alt="バナー"/></li>
		<li><img src="images/0509.jpg" width="200px" height="80px" alt="バナー"/></li>
		</ul>
		</div>
		<div id="content">
		<h2>ここに見出しが入る</h2>
		<p>ここに本文が入る</p>
		</div>
	</div>
		<div id="footer">
		<address>フェリカテクニカルアカデミー　〒171-0022　豊島区南池袋2-4-3　連絡先：000-0000</address>
		</div>
</div>
</body>
</html>