支援訓練 77日目

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>楽しいおかず</title>
<!--[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; }
  body, header, nav, section, figure, ul, li,div, h1{
    margin: 0;
    padding:0;
  }
  #container {
    width:960px;
    margin: 0 auto;
  }
  header, section {
    width:320px;
    float:left;
  }
  .content {
    width:320px;
    float: left;
  }
  img {
    border:none;
    margin: 10px;
    vertical-align:bottom;
    float:left;
  }
  nav ul {
    list-style-type: none;
    width:320px;
    overflow:hidden;
  }
 nav ul li {
    float: left;
  }
  .mini_left {
    width: 160px;
  }
  .mini_right {
    width:160px;
  }
  
</style>
</head>

<body>
  <div id="container">
  <section class="content">
<header>
<h1><img src="img/logo01.png"  width="300" height="300" alt="ロゴ" title="楽しいおかず"></h1>
  
  <nav>
    <ul>
    <li><img src="img/nav01_01.png" width="140" height="140" alt="ロゴ" title="楽しいおかず"></li>
    <li><img src="img/nav03_01.png" width="140" height="140" alt="ロゴ" title="楽しいおかず"></li>
    <li><img src="img/nav02_01.png" width="140" height="140" alt="ロゴ" title="楽しいおかず"></li>
    <li><img src="img/nav04_01.png" width="140" height="139" alt="ロゴ" title="楽しいおかず"></li>
    </ul>
  </nav>
  </header>
  <section>
  <figure><img src="img/ph26_l.jpg" width="300" height="300" alt="ロゴ" title="楽しいおかず"></figure>
  </section>
  <section>
  <figure><img src="img/ph36_mt.jpg" width="140" height="300" alt="ロゴ" title="楽しいおかず"></figure>
  <figure><img src="img/ph19_s.jpg" width="140" height="140" alt="ロゴ" title="楽しいおかず"></figure>
  <figure><img src="img/ph37_s.jpg" width="140" height="140" alt="ロゴ" title="楽しいおかず"></figure>
  </section>
  <section>
  <figure><img src="img/ph23_my.jpg" width="300" height="140" alt="ロゴ" title="楽しいおかず"></figure>
  <figure><img src="img/ph28_s.jpg" width="140" height="140" alt="ロゴ" title="楽しいおかず"></figure>
  <figure><img src="img/ph05_s.jpg" width="140" height="140" alt="ロゴ" title="楽しいおかず"></figure>
  </section>
  </section><!-- content -->
  
  <section class="content">
  <section>
  <figure><img src="img/ph12_my.jpg" width="300" height="140" alt="ロゴ" title="楽しいおかず"></figure>
  <figure><img src="img/ph02_s.jpg" width="140" height="140" alt="ロゴ" title="楽しいおかず"></figure>
  <figure><img src="img/ph22_s.jpg" width="140" height="140" alt="ロゴ" title="楽しいおかず"></figure>
  </section>
  <section>
  <figure><img src="img/ph10_l.jpg" width="300" height="300" alt="ロゴ" title="楽しいおかず"></figure>
  </section>
  <section>
  <section class="mini_left">
  <figure><img src="img/ph21_s.jpg" width="140" height="140" alt="ロゴ" title="楽しいおかず"></figure>
  <figure><img src="img/ph03_s.jpg" width="140" height="140" alt="ロゴ" title="楽しいおかず"></figure>
  </section><!-- mini_left -->
  <section class="mini_right">
  <figure><img src="img/ph07_mt.jpg" width="140" height="300" alt="ロゴ" title="楽しいおかず"></figure>
  </section><!-- mini_right -->
  </section>
  <section>
  <figure><img src="img/ph09_l.jpg" width="300" height="300" alt="ロゴ" title="楽しいおかず"></figure>
  </section>
  <section>
  <figure><img src="img/ph13_s.jpg" width="140" height="140" alt="ロゴ" title="楽しいおかず"></figure>
  <figure><img src="img/ph27_s.jpg" width="140" height="140" alt="ロゴ" title="楽しいおかず"></figure>
  <figure><img src="img/ph24_my.jpg" width="300" height="140" alt="ロゴ" title="楽しいおかず"></figure>
  </section>
  </section><!-- content -->

  <section class="content">
  <section>
  <figure><img src="img/ph11_l.jpg" width="300" height="300" alt="ロゴ" title="楽しいおかず"></figure>
  </section>
  <section>
  <section class="mini_left">
  <figure><img src="img/ph18_s.jpg" width="140" height="140" alt="ロゴ" title="楽しいおかず"></figure>
  <figure><img src="img/ph17_s.jpg" width="140" height="140" alt="ロゴ" title="楽しいおかず"></figure>
  </section><!-- mini_left -->
  <section class="mini_right">
  <figure><img src="img/ph01_mt.jpg" width="140" height="300" alt="ロゴ" title="楽しいおかず"></figure>
  </section><!-- mini_right -->
  </section>
  <section>
  <figure><img src="img/ph20_s.jpg" width="140" height="140" alt="ロゴ" title="楽しいおかず"></figure>
  <figure><img src="img/ph06_s.jpg" width="140" height="140" alt="ロゴ" title="楽しいおかず"></figure>
  <figure><img src="img/ph15_my.jpg" width="300" height="140" alt="ロゴ" title="楽しいおかず"></figure>
  </section>
  <section>
  <figure><img src="img/ph25_s.jpg" width="140" height="140" alt="ロゴ" title="楽しいおかず"></figure>
  <figure><img src="img/ph08_s.jpg" width="140" height="140" alt="ロゴ" title="楽しいおかず"></figure>
  <figure><img src="img/ph16_s.jpg" width="140" height="140" alt="ロゴ" title="楽しいおかず"></figure>
  <figure><img src="img/ph04_s.jpg" width="140" height="140" alt="ロゴ" title="楽しいおかず"></figure>
  </section>
  <section>
  <figure><img src="img/ph14_l.jpg" width="300" height="300" alt="ロゴ" title="楽しいおかず"></figure>
  </section>
  </section><!-- content -->
  </div><!-- container -->
</body>
</html>