<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>トップ|allWeb 豆はカラダにイイ</title>
<link rel="stylesheet" type="text/css" href="css/style00.css" media="all">
<style>
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<header>
<hgroup>
<h1><img src="img/logo.jpg" alt="ロゴallWebクリエイター塾"></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="contents">
<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>
<div id="sub">
<aside>
<h4>枝豆隊隊長</h4>
<img src="img/03.jpg" alt="肖像 枝豆隊長"><p>枝豆隊隊長は、枝豆について知識をもち、新しい枝豆料理につねにチャレンジしています。</p>
</aside>
</div>
</div>
<footer>
<p><small>2013©HTML5練習課題</small></p>
</footer>
</body>
</html>
/* CSS Document */
@charset "utf-8";
/* @group reset */
*{margin: 0;padding: 0}
a { text-decoration : none}
ul, ol { list-style : none}
img { border: none; vertical-align : bottom;max-width:100%;}
/*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;
}
h2 {
font-size: 36px;
line-height: 1.33;
}
h3 {
font-size:24px;
line-height: 1.0;
}
hgroup h2, h4 {
font-size: 16px;
line-height: 24px;
}
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;
}
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%); /* FF3.6+ */
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}
nav ul li a { display : block; padding : 12px 0}
nav ul li a {
display : block;
color : #d8c2a4;
padding : 12px 0}
nav ul li a:hover {
color : white;
background-color : #7d4934}
#contents {
width : 90%;
margin : 0 auto;
text-align : center}
#contents p {
margin-bottom : 24px;
text-align : left}
#contents img {
margin-bottom : 24px;
box-shadow : 0 0 12px #000}
footer {
color : white;
text-align : center;
padding : 24px 0;
background : url("../img/footer_bg.png")}
/*768px*/
@media screen and (min-width : 768px){
#contents { text-align : left}
}
@media screen and (min-width : 1024px) {
/* ここに1024px以上のCSSを記述*/
}
html {
font-family : verdana, sans-serif;
font-size : 100%;
line-height : 1.5;
background : url(../img/960_grid_12_col.png) repeat-y top center}
#contents {
overflow : hidden;
width : 960px} /* 960/1024 */
#contents #main,
#contents #sub {
float : left;
margin : 0 10px } /*10/960*/
#contents #main { width : 620px } /*620/960*/
#contents #sub { width : 300px } /*300/960*/
nav ul {
width : 960px;/* 960/1024 */
margin : 0 auto}
footer {
width : 940px; /*940/1024*/
padding : 24px 0;
margin : 0 auto}
/* @end */
