H13 C13 - HTML5, jQuery役立つ情報ブログ

見本
作ったもの
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>H13C13</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<div id="wrapper">
<div id="left">
<div id="nav">
<ul>
<li id="info"><a href="#">Information</a></li>
<li id="menu"><a href="#">Menu</a></li>
<li id="access"><a href="#">Access</a></li>
<li id="mail"><a href="#">Mail</a></li>
</ul>
</div> <!--/#nav-->
<h1><a href="#"><img src="img/logo.gif" width="267px" height="129px" alt=""></a></h1>
</div> <!--/#left-->
<div id="middle">
<p><img src="img/photo03.jpg" width="160px" height="160px" alt=""></p>
<p><img src="img/photo05.jpg" width="80px" height="80px" alt=""></p>
<p class="blank"></p>
<p class="blank"></p>
<p><img src="img/photo07.jpg" width="80px" height="80px" alt=""></p>
<p><img src="img/photo04.jpg" width="80px" height="80px" alt=""></p>
<p class="blank"></p>
<p><img src="img/photo06.jpg" width="80px" height="80px" alt=""></p>
<p class="blank"></p>
<p class="blank"></p>
<p><img src="img/photo02.jpg" width="160px" height="160px" alt=""></p>
<p><img src="img/photo08.jpg" width="80px" height="80px" alt=""></p>
</div> <!--/#middle-->
<div id="right">
<p class="blank"></p>
<p class="blank"></p>
<p><img src="img/photo01.jpg" width="160px" height="160px" alt=""></p>
<p class="blank"></p>
<p><img src="img/photo10.jpg" width="80px" height="80px" alt=""></p>
<p><img src="img/photo09.jpg" width="80px" height="80px" alt=""></p>
<p class="blank"></p>
</div> <!--/#right-->
</div> <!--/#wrapper-->
</div> <!--/#container-->
</body>
</html>




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

/*reset*/
body, div, p, a, ul, li, img,class, p.class {
  margin: 0;
  padding: 0;
}
p {
  line-height: 0;
}

#container {
  width: 840px;
  height: 480px;
  margin: 0 auto;
  background: #6F4E37;
  overflow: hidden;
}
#wrapper {
  width: 760px;
  height: 400px;
  background: white;
 overflow: hidden;
 margin: 40px 0 0 40px;
}
#left {
  width: 280px;
  height: 400px;
  float: left;
}
#middle {
  width: 320px;
  height: 400px;
  float: left;
}
#right {
  width: 160px;
  height: 400px;
  float: left;
}
p.blank {
  width: 80px;
  height: 80px;
}
#middle p {
  float: left;
}
#right p {
	float: left;
}
h1 a {
	width: 276px;
	height: 129px;
	margin-left: 17px;
}
#nav {
  padding: 10px 0 0 20px;
  margin-bottom: 100px;
}
ul li {
	list-style: none;
	margin-bottom: 10px;
}
ul li a {
	text-decoration: none;
	color: #6F4E37;
	font-family: Georgia, "Times New Roman", Times, serif;
}