レスポンシブWebデザイン



<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>トップ | 豆はカラダにイイ</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1><img src="img/logo.jpg" alt="豆はカラダにイイ サイトロゴ"></h1>
<h2>豆はカラダにイイ</h2>
<nav>
<ul>
<li><a href="img/#">ホーム</a></li>
<li><a href="img/#">枝豆一覧</a></li>
<li><a href="img/#">枝豆隊</a></li>
<li><a href="img/#">アクセス</a></li>
</ul>
</nav>
</header><!-- /header -->
<div id="content">
<div id="main">
<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><!-- /#main -->
<div id="sub">
<aside>
<h4>枝豆隊隊長</h4>
<img src="img/03.jpg" alt="肖像 枝豆隊長">
<p>枝豆隊隊長は、枝豆について知識をもち、新しい枝豆料理につねにチャレンジしています。</p>
</aside>
</div><!-- /#sub -->
</div><!-- /#content -->
<footer>
<p><small>2004-2012&copy;枝豆隊</small></p>
</footer><!-- /footer -->
</body>
</html>