rwd えだまめ隊長 - webかたつむり

soybean

PC

tablet

タブレットは小型のPCという意識で使われているから、PCのレイアウトに準じた。
全体を#container で囲って、padding 8px 周囲につけた。

smart phone

ナビゲーションの横幅を50%にして、border をnth-child(); を使って変更した。
borderは、li a に付けていることを忘れずに。

box-shadowを、<p>に対してつけたので、「フルードイメージ」にならなかった。この箇所を赤字のように修正した。
<p class="img"><img src="img/ph01.jpg" alt="ph01"></p>
#main .img{
box-shadow: 0px 10px 6px -6px #777;
<p><img src="img/ph01.jpg" alt="ph01" class="mainImg"></p>
.mainImg{box-shadow: 0px 10px 6px -6px #777;}

html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>soybean</title>


<style>
article, aside, dialog, figure, footer, header,
menu, main, nav, section { display: block; }
</style>
</head>

<body>
<div id="container">
<div id="header">
<h1><img src="img/logo.svg" alt="logo"></h1>
<h2>豆はカラダにイイ</h2>
</div>
<div id="nav">
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">枝豆一覧</a></li>
<li><a href="#">枝豆隊</a></li>
<li><a href="#">アクセス</a></li>
</ul>
</div>

<div id="wrapper">
<div id="main">
<h3>枝豆の栄養素はスゴい</h3>

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

<h3>代表的な豆料理</h3>

<h4>枝豆</h4>

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

<h4>ずんだ</h4>
<p><img src="img/ph02.jpg" alt="ph02" class="mainImg"></p>
<p class="text">ゆでた枝豆をすり潰したもの。ずんだを餅にまぶしたものは「ずんだ餅」といって宮城県の特産品です。
主に夏の時期に食べられます。非常に枝豆の風味が良いのが特徴です。</p>
</div>

<div id="side">
<h4>枝豆隊隊長</h4>
<p class="img"><img src="img/ph03.jpg" alt="ph03"></p>
<p class="text">枝豆隊隊長は、枝豆について知識をもち、新しい枝豆料理につねにチャレンジしています。</p>
</div>

</div>

<div id="footer">
<p class="text">2004-2012c枝豆隊</p>
</div>
</div>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */
html, body, h1, h2, h3, h4, p, ul, li, img, a{
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
body:{
font-size: 16px;
}
ul, li{
list-style-type: none;
}
a{
text-decoration: none;
}
img{
vertical-align: bottom;
max-width: 100%;/*オリジナルサイズ以上に拡大しない*/
}
/*reset------------------------------------------------------------------------------
*/
h1, h2{
text-align: center;
margin-bottom: 16px;
font-size: 48px;
}
h3{
font-size: 32px;
margin-bottom: 16px;
}
h4{
font-size: 24px;
margin-bottom: 16px;
}
p{
margin-bottom: 16px;
}
p.text{
line-height : 1.6;
margin-bottom: 16px;
padding: 0 0.5em 0 0.5em;
}
#header{
padding-top: 16px;
}
#nav{
background: #630;/*background は#nav につける。*/
margin-bottom: 32px;
}
#nav ul{
width: 960px;/*<ul>には幅指定*/
margin: 0 auto;
overflow: hidden;
}
#nav li{
width: 240px;
height: 50px;
float: left;
box-sizing: border-box;/*フロートさせるものには必ずつけておく*/
text-align: center;
}

#nav li a{
display: block;
border-left: 1px solid white;/*borderは必ず、li a に指定する。こうすると、liの幅が変わらなくてすむ。*/
line-height: 50px;
color: white;
font-weight: bold;
}
#nav li a:hover{
color: #630;
background: #C7A747;
}

#nav li:first-child a{
border-left: none;
}
/*headder------------------------------------------------------------------------------------------
*/
#wrapper{
width: 960px;
margin: 0 auto;
overflow: hidden}
#main{
width: 600px;
float: left;
box-sizing: border-box;
margin-right: 60px;
}
.mainImg{
box-shadow: 0px 10px 6px -6px #777;
}
#side{
width: 300px;
float:left;
box-sizing: border-box;
}
#footer{
background: #409F3E;
text-align: center;
height: 100px;
}
#footer p{
line-height: 100px;
color: white;
}
.text a{
color: blue;
}
.text a:hover{
color: red;
}
/*tablet
---------------------------------------------------------------------------------------------*/
@media screen and (max-width: 959px){
h1, h2{
margin-bottom: 10px;
font-size: 36px;
}
h3{
font-size: 24px;
margin-bottom: 10px;
}
h4{
font-size: 16px;
margin-bottom: 10px;
}
p{
margin-bottom: 10px;
}
p.text{
margin-bottom: 10px;
}
#header{
padding-top: 10px;
}
#nav{
margin-bottom: 20px;
}
#nav ul{
width: 100%;
}
#nav li{
width: 25%;
}

#wrapper{
width: 100%;
}
#main{
width: 62.5%;
margin-right: 1%;
}
#side{
width: 36.5%;
}
}
@media screen and (max-width: 767px){
h1, h2{
margin-bottom: 8px;
font-size: 24px;
}
h3{
font-size: 20px;
margin-bottom: 8px;
}
h4{
font-size: 16px;
margin-bottom: 8px;
}
p{
margin-bottom: 8px;
}
p.text{
margin-bottom: 8px;
}
#header{
padding-top: 8px;
}
#nav{
margin-bottom: 12px;
}
#nav li{
width: 50%;
}
#nav li a{
border: none;
}
#nav li:nth-child(odd) a{
border-right: 1px solid #fff;
}
#nav li:nth-child(-n+2) a{
border-bottom: 1px solid #fff;
}
#main{
width: 100%;
}
#side{
width: 100%;
}
}