レスポンシブwebデザイン

responsive

アスキーの下記の記事を参考に作成しました。
http://ascii.jp/elem/000/000/697/697463/

http://portfolio.tank.jp/responsive/

ソース

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width ">
<title>トップ | 豆は体にイイ</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.5.3/modernizr.min.js"></script>
<![endif]-->
<style>
article,aside,dialog,figure,footer,header,hgroup,menu,nav,section{display:block}
</style>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src=""></script>
</head>
<body>
<header>
<hgroup>
<h1><img src="img/01.png" alt="ロゴ"></h1>
<h2>豆は体にイイ</h2>
</hgroup>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">枝豆一覧</a></li>
<li><a href="#">枝豆隊</a></li>
<li><a href="#">アクセス</a></li>
</ul>
</nav>
</header>
<div id="content">
<div id="mein">
<section id="vitamin">
<h3>枝豆の栄養素はスゴい</h3>
<p>枝豆は大豆が未成熟で収穫したものですが、<a href="#">たくさんの栄養がつまっています</a>。枝豆のタンパク質に含まれる成分はアルコールを分解を促します。カリウムも含まれており塩分を体の外に排出する手伝いをしています。</p>
</section>
<section id="reciept">
<h3>代表的な豆料理</h3>
<h4>枝豆</h4>
<img src="img/01.jpg" alt="イラスト　枝豆"><p>枝豆は未成熟の大豆を収穫したもの。枝付きのままゆでたので「枝豆」と呼ばれるようになりました。塩ゆでして食べると非常に美味。しかし塩ゆでするときは沸騰した湯で茹でる。茹で上がった豆を冷水でさらしてはいけない。濃厚な風味がそこなわれることになる。</p>
<h4>ずんだ</h4>
<img src="img/02.jpg" alt="イラスト　ずんだ"><p>ゆでた枝豆をすり潰したもの。ずんだを餅にまぶしたものは「ずんだ餅」といって宮城県の特産品です。主に夏の時期に食べられます。非常に枝豆の風味が良いのが特徴です。</p>
</section>
</div>
<div id="sub">
<aside>
<h4>枝豆隊隊長</h4>
<img src="img/03.jpg" alt="肖像　枝豆隊長"><p>枝豆隊隊長は、枝豆について知識をもち、新しい枝豆料理につねにチャレンジしています</p>
</aside>
</div>
</div>
<footer>
<p><small>2013 &copy; HTML5練習課題</small></p>
</footer>
</body>
</html>
@charset "utf-8";
/* reset */
body,div,h1,h2,h3,h4,p,ul,li,img,article,aside,dialog,figure,footer,header,hgroup,menu,nav,section {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
img {
  border: none;
  vertical-align: bottom;
  max-width: 100%;
}
a {
  text-decoration: none;
}

/* layout */
body {
  font-family:
    "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1.6;
}
h1,h2,h3,h4 {
  margin-bottom: 24px;
}
h1 {
  font-size: 48px;
  line-height: 1;
}
h2 {
  font-size: 36px;
  line-height: 1.3333;
}
h3 {
  font-size: 24px;
  line-height: 1;
  
}
hgroup h2,h3,h4,h5,h6{
  font-size: 16px;
  line-height: 1.5;
}
header { 
  text-align: center;
  padding-top: 24px;
}
header h1 {
  margin-bottom: 24px;
}
header h2 {
  color: #62240b;
}
nav ul li{
  width: 25%;
  float: left;
}
nav ul li a {
  display: block;
  color: #d8c2a4;
  padding: 12px 0;
}
nav ul li a:hover {
  color: #fff;
  background-color: #7d4934;
}
nav {
  margin-bottom: 24px;
  background-color: #7d4934;
  background: -moz-linear-gradient(top, rgba(81,24,8,0.71) 0%, rgba(91,25,0,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(81,24,8,0.71)), color-stop(100%,rgba(91,25,0,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(81,24,8,0.71) 0%,rgba(91,25,0,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(81,24,8,0.71) 0%,rgba(91,25,0,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(81,24,8,0.71) 0%,rgba(91,25,0,1) 100%); /* IE10+ */
  background: linear-gradient(top, rgba(81,24,8,0.71) 0%,rgba(91,25,0,1) 100%); /* W3C */
}
nav ul{
  overflow: hidden;
}
#content {
  width: 90%;
  margin: 0 auto;
  text-align: center;
}
#content p {
  margin-bottom: 24px;
  text-align: left;
}
#content img {
  margin-bottom: 24px;
  box-shadow: 0 0 12px #666;
}
footer {
  color: white;
  text-align: center;
  padding: 24px 0;
  background: url(../img/footer_bg.png);
}