サイト練習：枝豆隊長 - Webデザインのこと、いろいろ

枝豆隊長：完成サイトにリンク

★メディアクエリ時に、リストで組んでいるボタンが二段になる際の、borderの指示の仕方、nth-childに気をつける。
★ボタンの色設定が、センスがいるなぁと思い、手こずった。
f:id:sankoblog:20160403220147p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>枝豆隊長</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style_mame.css">
<!--[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,
  menu, main, nav, section { display: block; }
</style>
<script src=""></script>
</head>

<body>
<header>
<h1>枝豆隊ロゴ</h1>
<p id="p_header">豆はカラダにイイ</p>
<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="container">
<div id="wrapper">

<section id="vitamin">
<h2>枝豆の栄養素はスゴい</h2>
<p>枝豆は大豆が未成熟で収穫したものですが、たくさんの栄養がつまっています。枝豆のタンパク質に含まれる成分はアルコールを分解を促します。カリウムも含まれており塩分を体の外に排出する手伝いをしています。</p> 
</section><!--#vitamin-->

<section id="reciept">
<h2>代表的な豆料理</h2>
<h3>枝豆</h3>
<img class="img_shadow" src="img/mame01.jpg" alt="枝豆">
<p class="reciept_mame">枝豆は未成熟の大豆を収穫したもの。枝付きのままゆでたので「枝豆」と呼ばれるようになりました。塩ゆでして食べると非常に美味。しかし塩ゆでするときは沸騰した湯で茹でる。茹で上がった豆を冷水でさらしてはいけない。濃厚な風味がそこなわれることになる。</p>
<h3>ずんだ</h3>
<img class="img_shadow" src="img/mame02.jpg" alt="ずんだ">
<p class="reciept_mame">ゆでた枝豆をすり潰したもの。ずんだを餅にまぶしたものは「ずんだ餅」といって宮城県の特産品です。主に夏の時期に食べられます。非常に枝豆の風味が良いのが特徴です。</p>
</section> <!--#reciept-->
</div> <!--#wrapper-->

<div id="sub">
<aside>
<h3>枝豆隊隊長</h3>
<img class="taicho" src="img/mame03.jpg" alt="肖像 枝豆隊長">
<p>枝豆隊隊長は、枝豆について知識をもち、新しい枝豆料理につねにチャレンジしています。</p>
</aside>
</div> <!--#sub-->

</div> <!--#container-->

<footer><p><small>2004-2012&copy;枝豆隊</small></p></footer>
</body>
</html>

@charset "utf-8";
/* CSS Document */
/*reset*/
html,body,h1,h2,h3,h4,ul,li,p {
	margin: 0;
	padding: 0;
	line-height: 1.0;
	font-family: "Hiragino Kaku Gothic ProN", Meiryo,;
	}
ul { list-style: none; }	
a { text-decoration: none; }
body {
	font-size: 16px;
	}
img {
	border: none;
	vertical-align: bottom;
	margin-bottom: 20px;
	}
p {
	line-height: 1.5em
}
/*----------------------------------*/
/* font-size */
html { font-size: 62.5%; }  /* =10px */
body { font-size: 16px; font-size: 1.6rem; }  /* =16px */
h1 { font-size: 32px; font-size: 3.2rem; }
h2 { font-size: 24px; font-size: 2.4rem; }
h3 { font-size: 20px; font-size: 2.0rem; }
h4 { font-size: 18px; font-size: 1.8rem; }
p { font-size: 16px; font-size: 1.6rem }
/*layout*/
header {
	padding-top: 20px;
}
#container {
	width: 960px;
	margin: 0 auto;
	background: #FFF;
	overflow: hidden;
}
#wrapper {
	width: 600px;
	padding: 10px;
	float: left;
}
#sub {
	width: 300px;
	float: right;
}
header {
	margin-bottom: 40px;
}
h1 {
	margin: 0 auto;
	width: 71px;
	height: 72px;
	background: url(../img/logo.png) no-repeat;
	white-space: nowrap;
	text-indent: 100%;
	overflow: hidden;
}
#p_header {
	text-align: center;
	font-size: 36px;
	font-weight: bold;
	margin-bottom: 10px;
}
nav {
	width: 100%;
	height: 48px;
	background: -webkit-linear-gradient(#864C3A,#5D1C05);
	background: linear-gradient(#864C3A,#5D1C05);
}
ul {
	width: 960px;
	margin: 0 auto;
	overflow: hidden;
}
li {
	width: 25%;
	box-sizing: border-box;
	text-align: center;
	font-weight: bold;
	letter-spacing: 2px;
	background: -webkit-linear-gradient(#864C3A,#5D1C05);
	background: linear-gradient(#864C3A,#5D1C05);
	float: left;
	border-right: 1px solid #FFF;
}
li:first-child {
	border-left: 1px solid #FFF;
}
li a{
	display: block;
	color: #D8D8D8;
	line-height: 48px;
}
li a:hover{
	color: #FFF;
	background: -webkit-linear-gradient(#5D1C05,#864C3A);
	background: linear-gradient(#5D1C05,#864C3A);

}
#vitamin {
	margin-bottom: 30px;
}
#reciept {
	margin-bottom: 30px;
}
.img_shadow {
	max-width: 580px;
	box-shadow: 5px 5px 5px #999;
}
.taicho {
	max-width: 300px;
}
#sub {
	margin-bottom: 30px;
}	
h2,h3 {
	margin-bottom: 20px;
}
.reciept_mame {
	margin-bottom: 30px;
}
footer {
	width: 100%;
	letter-spacing: 3px;
	background: #629E3C;
}
footer p {
	color: #FFF;
	line-height: 3em;
	text-align: center;
}
@media screen and (max-width: 999px) {
ul {
	width: 100%;
}
li {
	border-right: 1px solid #FFF;
}
li:first-child {
	border-left: none;
}
#container {
	width: 96%;
}
#wrapper {
	width: 98%;
	padding: 1%;
}
#sub {
	width: 98%;
	padding: 1%;
		float: none;
}
nav {
	margin-bottom: 30px;
}
li {
	width: 25%;
}
.taicho {
	max-width: 580px;
	box-shadow: 5px 5px 5px #999;
}
}
@media screen and (max-width: 767px) {
nav {
	margin-bottom: 80px;
}
img {
	width: 98%;
}
li {
	width: 50%;
	float: left;
	background: #662B17;
}
li a:hover {
	background: #945D4A;
}
#wrapper {
	text-align: center;
	width: 98%
}
#sub {
	text-align: center;
}
li {
	border: none;
}
li:nth-child(-n+2) {
	border-bottom: 1px solid #FFF;
}
li:nth-child(odd) {
	border-right: 1px solid #FFF;
}
}