電習ノートすろーボート

container + padding10px container　内に10pxもぐり込む、入る、下がる。

IE6は間違いが多いのでfirefox基準でOK

5/14テストの解説；

<?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>【確認テスト05月14日】</title>
<style type="text/css">
<!--
* {
	margin: 0;
	padding: 0;
}
ul {
	list-style-type: none;
}
img {
	border: none;
}
body {
	color: #FFF;
	font-size: 1.0em;
	font-family:
	  "ヒラギノ角ゴ Pro W3", 
	  "Hiragino Kaku Gothic Pro", 
	  "メイリオ", 
	  Meiryo, 
	  Osaka, 
	  "ＭＳ Ｐゴシック", 
	  "MS PGothic", 
	  sans-serif;
	background-color: #CCC;
}
#container {
	width: 800px;
	height: auto;
	margin: 0 auto;
	padding: 10px;
	background-color: #FFF;
	overflow: hidden;
}
#header {
	width: auto;
	height: 100px;
	margin: 0 0 10px 0;
	background-color: #A3BED5;
}
h1 {
	color: #FFF;
	font-size: 1.6em;
	font-family: serif;
	padding: 20px 0 0 20px;

<span class="deco" style="font-weight:bold;">padding:はline-heght:にも置き換えられる</span>

}
#content {
	float: right;
	width: 540px;　
	height: 290px;
	margin: 0 0 10px 0;
	padding: 10px;
	background-color: #DCD78A;
}
#sidebar {
	float: left;
	width: 200px;
	height: auto;
	padding: 10px 10px 0 10px;
	background-color: #9CC56E;
}
#sidebar li {
	height: 80px;
	margin: 0 0 10px 0;
}
#footer {
	clear: both;
	width: auto;
	height: 50px;
	background-color: #E0B9D2;
}
address {
	font-style: normal;
	text-align: center;
	padding: 15px 0 0 0;
}

<span class="deco" style="font-weight:bold;">marginではなくpaddingで空きを作る。CSSは重層的に重なり合っている。
</span>

-->
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>ここにサイトタイトルが入る</h1>
</div>
<div id="wrapper">
<div id="content">
<h2>ここに見出しが入る</h2>
<p>ここに本文が入る</p>
</div>
<div id="sidebar">
<ul>
<li><img src="images/banner.jpg" width="200" height="80" alt="" /></li>
<li><img src="images/banner.jpg" width="200" height="80" alt="" /></li>
<li><img src="images/banner.jpg" width="200" height="80" alt="" /></li>
</ul>
</div>
</div>
<div id="footer">
<address>ここに連絡先のテキストが入る</address>
</div>
</div>
</body>
</html>

CSS18,19,20課題の解説；CSS18

.nav {
	margin: 50px;
}
.nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.nav li	{	
	font-size: 0.875em;
	display: inline;
	margin: 0 0 0 10px;
	padding:5px 0 5px 10px;
	border-left: 1px solid #999;
}
.nav li.first {
	border-left: none;
}
.nav li a:link	{
	color: #000;
	text-decoration: none;
}
nav li a:visited {
	color: #90C;
}
.nav li a:hover {
	color: #FA0;
}


<span class="deco" style="font-weight:bold;">CSS19</span>

.nav	{
	font-size: 0.75em;
	margin: 50px;
}
.nav ul	{
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.nav li	{
	float: left;
}
.nav li a	{
	color: #000;
	text-align: center;
	text-decoration: none;
	display: block;
	width: 120px;
	line-height: 25px;
	border-right: solid 1px #AAA;
}
.nav li.first a:link	{
	border-left: solid 1px #AAA;
}
.nav li a:hover	{
	background-color: #E8EEB6;
}


<span class="deco" style="font-weight:bold;">CSS20</span>

.nav {
	font-size: 0.75em;
	width: 760px;
	height: 30px;
	background-color: #393;
}
.nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.nav li {
	float: left;
}
.nav li a:link {
	color: #FFF;
	text-align: center;
	text-decoration: none;
	line-height: 30px;
	display: block;
	width: 120px;
	border-right: solid 1px #FFF;	
}
.nav li a:hover {
	background-color: #3C6;
}

電習ノートすろーボート

5/25クラスノート

5/18クラスノート

5/16クラスノート

■

5/15クラスノート

クラスメモ5/14/2012

クラス第7回