【課題】楽しいおかず・グリッドシステムCSS 縦組

課題

　縦3行のブロックで組む
タグも「HTML5」を分かる範囲で使ってみた。マージンにばらつきがあるので、まだ修正要

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>楽しいおかず/グリッドシステム縦CSS</title>
<link rel="stylesheet" href="style02.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>
<div id="container">
    <article class ="left">
	  <header>
	   <h1> <img src="images/logo01.png" ></h1>
	   <nav>
	      <figure><a><img src="images/nav01.png"  width="140px" height="140px"></a></figure>
	      <figure><a><img src="images/nav02.png" width="140px" height="140px"></a></figure>
              <figure><a><img src="images/nav03.png" width="140px" height="140px"></a></figure>
	      <figure><a><img src="images/nav04.png" width="140px" height="140px"></a></figure>
	  </nav>
	  </header>
	<section>
	    <figure><img src="images/ph26_l.jpg" width="300" height="300"></figure>
        </section>
         <section>
	    <figure><img src="images/ph36_mt.jpg" width="140" height="300"></figure>
            <figure><img src="images/ph19_s.jpg" width="140" height="140"></figure>
	    <figure><img src="images/ph37_s.jpg" width="140" height="140"></figure>
         </section>
	 <section>
	  <figure><img src="images/ph23_my.jpg" width="300" height="140"></figure>
          <figure><img src="images/ph28_s.jpg" width="140" height="140"></figure>
          <figure><img src="images/ph05_s.jpg" width="140" height="140" ></figure>
	  </section>
  </article>
 <article class="left">
 	  <section>
	    <figure><img src="images/ph12_my.jpg" width="300" height="140"></figure>
            <figure><img src="images/ph02_s.jpg" width="140" height="140"></figure>
            <figure><img src="images/ph22_s.jpg" width="140" height="140"></figure>
	</section>
	<section>
		<figure><img src="images/ph10_l.jpg" width="300" height="300"></figure>
	</section>
	<section>
          <div class="box">
		<figure><img src="images/ph21_s.jpg" width="140" height="140"></figure>
		<figure><img src="images/ph03_s.jpg" width="140" height="140"></figure>
         </div>
            <figure  class="right"> <img src="images/ph07_mt.jpg" width="140" height="300"></figure>
	 </section>
	 <section>
		<figure><img src="images/ph09_l.jpg" width="300" height="300"></figure>
		</section>
		<section>
		<figure><img src="images/ph13_s.jpg" width="140" height="140"></figure>
		<figure><img src="images/ph27_s.jpg" width="140" height="140"></figure>
		<figure><img src="images/ph24_my.jpg" width="300" height="140"></figure>
		</section>
 </article>
<article class="right">
	<section>
		<figure><img src="images/ph11_l.jpg" width="300" height="300"></figure>
	</section>
	<section>
         <div class="box">
	 	<figure><img src="images/ph18_s.jpg" width="140" height="140"></figure>
                <figure><img src="images/ph17_s.jpg" width="140" height="140"></figure>
           </div>
                <figure><img src="images/ph01_mt.jpg" width="140" height="300" ></figure>
	</section>
	<section>
		<figure><img src="images/ph20_s.jpg" width="140" height="140"></figure>
		<figure><img src="images/ph06_s.jpg" width="140" height="140"></figure>
		<figure><img src="images/ph15_my.jpg" width="300" height="140"></figure>
	</section>
	<section>
		<figure><img src="images/ph25_s.jpg" width="140" height="140"></figure>
		<figure><img src="images/ph16_s.jpg" width="140" height="140"></figure>
                <figure><img src="images/ph08_s.jpg" width="140" height="140"></figure>
		<figure><img src="images/ph04_s.jpg" width="140" height="140"></figure>
    	</section>
	<section>
		<figure><img src="images/ph14_l.jpg" width="300" height="300"></figure>
	</section>
    </article>
</div>
</body>

</html>