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

確認テストの解説・解答

勘違いしているとこが、あったので記述し直しました。
<?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;
}
ul {
list-style-type: none;
}
img {
border: none; /*ボーダーのリセット*/
}
body {
color: #fff;
background-color: #ccc;
font-size: 1.0em;
font-family: "ヒラギノ角ゴ Pro W3", 
	  "Hiragino Kaku Gothic Pro", 
	  "メイリオ", 
	  Meiryo, 
	  Osaka, 
	  "ＭＳ Ｐゴシック", 
	  "MS PGothic", 
	  sans-serif;
text-aligh: center; /*IE6対策*/
}
#container {
background-color: yellow;
width: 800px;
height: auto; /*可変 なりゆきで変わる*/
margin: 0 auto; /*空きは半分半分で分かれる*/
padding: 10px;
overflow: hidden; /*自動の可変の大きさ*/
}
#header {
background-color: #a3bed5;
width: auto; /*実質780px*/
height: 100px;
margin: 0 0 10px 0;
}
h1 {
color: #fff;
font-size: 1.6em;
font-family: serif;
padding: 20px 0 0 20px;
}
#content {
background-color: #dcd78a;
width: 540px;
height:290px;
margin: 0 0 10px 0;
padding: 10px;
float:right;
}
#sidebar {
background-color: #9cc56e;
width: 200px; /*実質は220px*/
height: auto;
padding: 10px 10px 0 10px;
float: left;
}
#sidebar li {
width: 200px;
height;80px;
margin: 0 0 10px 0;
}
#footer {
background-color: #e0b9d2;
clear: both;
width: auto;
height: 50px;
}
#footer address {
font-style: normal;
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>