読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

レスポンシブWebデザイン - 実践(枝豆)

バイルファースト

  • 枝豆ロゴ

f:id:web-0818:20170104230446p:plain


f:id:web-0818:20170104234554p:plain



f:id:web-0818:20170104234649p:plain



f:id:web-0818:20170104235446p:plain



枝豆ロゴ
豆はカラダにイイ

ホーム
枝豆一覧
枝豆隊
アクセス
枝豆の栄養素はスゴい

枝豆は大豆が未成熟で収穫したものですが、たくさんの栄養がつまっています。枝豆のタンパク質に含まれる成分はアルコールを分解を促します。カリウムも含まれており塩分を体の外に排出する手伝いをしています。

代表的な豆料理

枝豆

枝豆
枝豆は未成熟の大豆を収穫したもの。枝付きのままゆでたので「枝豆」と呼ばれるようになりました。塩ゆでして食べると非常に美味。しかし塩ゆでするときは沸騰した湯で茹でる。茹で上がった豆を冷水でさらしてはいけない。濃厚な風味がそこなわれることになる。

ずんだ

ずんだ
ゆでた枝豆をすり潰したもの。ずんだを餅にまぶしたものは「ずんだ餅」といって宮城県の特産品です。主に夏の時期に食べられます。非常に枝豆の風味が良いのが特徴です。

枝豆隊隊長

肖像 枝豆隊長
枝豆隊隊長は、枝豆について知識をもち、新しい枝豆料理につねにチャレンジしています。

2017©枝豆
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>allWeb 豆はカラダにイイ | レスポンシブWebデザイン</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<header>
<div id="header">
<h1><img src="img/logo.png" alt="枝豆隊隊ロゴ"></h1>
<h2>豆はカラダにイイ</h2>
</div>
<nav>
<ul class="nav">
<li><a href="">ホーム</a></li>
<li><a href="">枝豆一覧</a></li>
<li><a href="">枝豆隊</a></li>
<li><a href="">アクセス</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>2017&copy;枝豆</small></p>
</footer><!-- /footer -->
</div><!-- /#container -->
</body>
</html>