おいしいおかず(HTML5)

課題


HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>おいしいおかず</title>
<link rel="stylesheet" href="style.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]-->
<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>

<body>
<div id="container">
<div class="left">
<header>
<section>
<figure>
<img src="img/logo01.png" alt="おいしいおかず" width="300" height="300">
</figure>
</section>



<section>
<nav>
<figure class="concept"><a href="#"><img src="img/nav01_01.png" alt="コンセプト" width="140" height="140"></a></figure>
<figure class="menu"><a href="#"><img src="img/nav02_01.png" alt="メニュー" width="140" height="140"></a></figure>
<figure class="access"><a href="#"><img src="img/nav03_01.png" alt="アクセス" width="140" height="140"></a></figure>
<figure class="news"><a href="#"><img src="img/nav04_01.png" alt="ニュース" width="140" height="139" ></a></figure>
</nav>
</section>
</header>


<section>
<figure><img src="img/ph26_l.jpg" alt="3-1" width="300" height="300"></figure>
</section>

<section>
<figure class="column3_1"><img src="img/ph36_mt.jpg" alt="4-1" width="140" height="300"></figure>
<figure class="column3_2"><img src="img/ph19_s.jpg" alt="4-2" width="140" height="140"></figure>
<figure class="column3_3"><img src="img/ph37_s.jpg" alt="4-3" width="140" height="140"></figure>
</section>

<section>
<figure class="column3_4"><img src="img/ph23_my.jpg" alt="5-1" width="300" height="140"></figure>
<figure class="column3_5"><img src="img/ph28_s.jpg" alt="5-2" width="140" height="140"></figure>
<figure class="column3_6"><img src="img/ph05_s.jpg" alt="5-3" width="140" height="140"></figure>
</section>
</div>

<div class="center">
<section>
<figure class="column3_4"><img src="img/ph12_my.jpg" alt="6-1" width="300" height="140"></figure>
<figure class="column3_5"><img src="img/ph02_s.jpg" alt="6-2" width="140" height="140"></figure>
<figure class="column3_6"><img src="img/ph22_s.jpg" alt="6-3" width="140" height="140"></figure>
</section>
</div>

<div class="right">
<section>
<figure><img src="img/ph11_l.jpg" alt="7-1" width="300" height="300"></figure>
</section>
</div>

<div class="center">
<section>
<figure><img src="img/ph10_l.jpg" alt="8-1" width="300" height="300"></figure>
</section>
</div>

<div class="right">
<section class="column">
<figure class="column3_7"><img src="img/ph18_s.jpg" alt="9-1" width="140" height="140"></figure>
<figure class="column3_8"><img src="img/ph17_s.jpg" alt="9-2" width="140" height="140"></figure>
<figure class="column3_9"><img src="img/ph01_mt.jpg" alt="9-3" width="140" height="300"></figure>
</section>
</div>

<div class="center">
<section class="column">
<figure class="column3_7"><img src="img/ph21_s.jpg" alt="10-1" width="140" height="140"></figure>
<figure class="column3_8"><img src="img/ph03_s.jpg" alt="10-2" width="140" height="140"></figure>
<figure class="column3_9"><img src="img/ph07_mt.jpg" alt="10-3" width="140" height="300"></figure>
</section>
</div>

<div class="right">
<section>
<figure class="column3_10"><img src="img/ph20_s.jpg" alt="11-1" width="140" height="140"></figure>
<figure class="column3_11"><img src="img/ph06_s.jpg" alt="11-2" width="140" height="140"></figure>
<figure class="column3_12"><img src="img/ph15_my.jpg" alt="11-3" width="300" height="140"></figure>
</section>
</div>

<div class="center">
<section>
<figure><img src="img/ph09_l.jpg" alt="12-1" width="300" height="300"></figure>
</section>
</div>

<div class="right">
<section>
<figure class="concept"><img src="img/ph25_s.jpg" alt="13-1" width="140" height="140"></figure>
<figure class="menu"><img src="img/ph08_s.jpg" alt="13-2" width="140" height="140"></figure>
<figure class="access"><img src="img/ph16_s.jpg" alt="13-3" width="140" height="140"></figure>
<figure><img src="img/ph04_s.jpg" alt="13-4" width="140" height="140"></figure>
</section>
</div>

<div class="center">
<section>
<figure class="column3_10"><img src="img/ph13_s.jpg" alt="14-1" width="140" height="140"></figure>
<figure class="column3_11"><img src="img/ph27_s.jpg" alt="14-2" width="140" height="140"></figure>
<figure class="column3_12"><img src="img/ph24_my.jpg" alt="14-3" width="300" height="140"></figure>
</section>
</div>

<div class="right">
<section>
<figure><img src="img/ph14_l.jpg" alt="15-1" width="300" height="300"></figure>
</section>
</div>
</div><!-- container-->
</body>
</html>

CSS

@charset "utf-8";

body,section,figure,img,div,header,nav{
  margin:0;
  padding:0;
}
img{
  border:none;
  vertical-align:bottom;
}

/* CSS Document */
#container{
  margin:0 auto;
  width:960px;
  overflow:hidden;
  padding-top:20px;
}
section{
  overflow:hidden;
  width:320px;
  height:320px;
}

/*left*/
.left{
  float:left;
}

/*center*/
.center{
  float:left;
}

/*right*/
.right{
  float:left;
}

/*３カラム-1*/
.column3_1{
  margin:0 20px 20px 0;
  float:left;
}

.column3_2{
  margin-bottom:20px;
  float:left;
}
.column3_3{
  float:left;
}

/*3カラム-2*/
.column3_4{
  margin-bottom:20px;
}
.column3_5{
  float:left;
  margin-right:20px;
}
.column3_6{
  float:left;
}

/*3カラム-3*/
.column{
  width:310px;
  margin-right:10px;
}

.column3_7{
  float:left;
  margin:0 20px 20px 0;
}
.column3_8{
  float:left;
  margin-right: 20px;

}
.column3_9{

}

/*3カラム-4*/
.column3_10{
  float:left;
  margin:0 20px 20px 0;
}
.column3_11{
  float:left;
  margin-bottom:20px;
}

/*4カラム*/
.concept{
  float:left;
  margin:0 20px 20px 0;
}
.menu{
  margin-bottom:20px;
}
.access{
  float:left;
  margin-right:20px;
}

↓