宿題

宿題

楽しいおかずの課題。一度目のHTMLのdivの囲み方が不十分であった。自分は、部分的な小さいものに、とらわれてしまって、大枠を捕らえきれない傾向がある。それゆえ、css時に細かく設定し過ぎてしまうようだ。余分なものを書いてしまい、肝心なものを書かない。もう少し、練習します。基本的なHtmlをきちんと書ける様になろう。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>楽しいおかず</title>
<link rel="stylesheet" href="base.css">
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>

<body>
<container>

<div class="block">

<div class="box">
<header>
<h1><a href="index.html"><img src="images/logo01.png" width="300" height="300"></a></h1>
</header>
</div>

<nav id="navi">
<ul>
<li><img src="images/nav01_01.png" width="140" height="140"alt="about"></li>
<li><img src="images/nav02_01.png"></li>
<li><img src="images/nav03_01.png" width="140" height="140"alt="access"></li>
<li><img src="images/nav04_01.png" width="140" height="139"alt="news"></li>
</ul>
</nav>

<p class="box"><img src="images/ph26_l.jpg" width="300" height="300"></p>
<div class="box">
<ul>
<li><img src="images/ph36_mt.jpg" width="140" height="300"></li>
<li><img src="images/ph19_s.jpg" width="140" height="140"></li>
<li><img src="images/ph37_s.jpg" width="140" height="140"></li>
</ul>
</div>

<div class="box">
<ul>
<li><img src="images/ph23_my.jpg" width="300" height="140"></li>
<li><img src="images/ph28_s.jpg" width="140" height="140"></li>
<li><img src="images/ph05_s.jpg" width="140" height="140"></li>
</ul>
</div>
</div>

<div class="block">
<div class="box">
<ul>
<li><img src="images/ph12_my.jpg" width="300" height="140"></li>
<li><img src="images/ph02_s.jpg" width="140" height="140"></li>
<li><img src="images/ph22_s.jpg" width="140" height="140"></li>
</ul>
</div>

<p class="box"><img src="images/ph10_l.jpg" width="300" height="300"></p>
<div class="box2">
<ul>
<li><img src="images/ph07_mt.jpg" width="140" height="300"></li>
<li><img src="images/ph21_s.jpg" width="140" height="140"></li>
<li><img src="images/ph03_s.jpg" width="140" height="140"></li>
</ul>
</div>

<p class="box"><img src="images/ph09_l.jpg" width="300" height="300"></p>
<div class="box">
<ul>
<li><img src="images/ph13_s.jpg" width="140" height="140"></li>
<li><img src="images/ph27_s.jpg" width="140" height="140"></li>
<li><img src="images/ph24_my.jpg" width="300" height="140"></li>
</ul>
</div>
</div>

<div id="block1">
<p class="box"><img src="images/ph11_l.jpg" width="300" height="300"></p>
<div class="box2">
<ul>
<li><img src="images/ph01_mt.jpg" width="140" height="300"></li>
<li><img src="images/ph18_s.jpg" width="140" height="140"></li>
<li><img src="images/ph17_s.jpg" width="140" height="140"></li>
</ul>
</div>

<div class="box">
<ul>
<li><img src="images/ph20_s.jpg" width="140" height="140"></li>
<li><img src="images/ph06_s.jpg" width="140" height="140"></li>
<li><img src="images/ph15_my.jpg" width="300" height="140"></li>
</ul>
</div>

<div class="box">
<ul>
<li><img src="images/ph25_s.jpg" width="140" height="140"></li>
<li><img src="images/ph08_s.jpg" width="140" height="140"></li>
<li><img src="images/ph16_s.jpg" width="140" height="140"></li>
<li><img src="images/ph04_s.jpg" width="140" height="140"></li>
</ul>
</div>

<p class="box"><img src="images/ph14_l.jpg" width="300" height="300"></p>

</div>

</container>
</body>
</html>

@charset "utf-8";
/* CSS Document */

*{
	 margin:0;
	 padding:0;
}

ul{
	 list-style-type:none;
}
img{
	vertical-align:bottom;
}
container{
	width:960px;
	height:auto;
	overflow:auto;
  margin:0 auto;
}
header{
	margin-bottom:20px;
}
p{
	margin-bottom:20px;
}
#navi{
	width:320px;
	overflow:auto;
}
#navi ul li{
	width:160px;
	float:left;
	margin-bottom:20px;
}

.block{
	width:320px;
	float:left;
}

#block1{
	width:320px;
	float:left;	
}
.box ul li{
	float:left;
	margin:0 20px 20px 0;
}
.box2 ul li{
	float:right;
	margin:0 20px 20px 0;
}