【RWD】可変レイアウトの演習２ - PCゲーマーのWebデザイン備忘録

可変レイアウトの演習をまたやりました。
今回はゼロから始めるレスポンシブWebデザイン入門を参考に行いました。

今回はモバイルファーストの考えでレイアウトが構成されています。

ブラウザレビュー

1024px以上

f:id:game-web-design:20141002111902p:plain

それ以下

f:id:game-web-design:20141002111909p:plain

ソース

html

<!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.png" alt="ロゴ"></h1>
<h2>豆はカラダにイイ</h2>

<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="content">
<div id="main">

<section id="vitamin">
<h3>枝豆の栄養素はスゴい</h3>

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

<section id="reciept">
<h3>代表的な豆料理</h3>
<h4>枝豆</h4>
<img src="img/edamame01.jpg" alt="イラスト　枝豆">
<p>枝豆は未成熟の大豆を収穫したもの。枝付きのままゆでたので「枝豆」と呼ばれるようになりました。塩ゆでして食べると非常に美味。しかし塩ゆでするときは沸騰した湯で茹でる。茹で上がった豆を冷水でさらしてはいけない。濃厚な風味がそこなわれることになる。</p>

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

</div><!--/#main-->

<div id="sub">

<aside>
<h4>枝豆隊隊長</h4>
<img src="img/edamame03.jpg" alt="肖像 枝豆隊長">

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

</div><!--/#sub-->
</div><!--/#contents-->

<footer>
<p><small>2004-2012©枝豆隊</small></p>
</footer>

</body>
</html>

aside･･･記事の補足を書いたりするタグ

CSS

@charset "utf-8";

/* reset*/
html, body , div , h1, h2, h3, h4, p, ul, li{
  margin: 0;
  padding: 0;
}

a{
  text-decoration: none;
}

ul{
  list-style: none;
}

img{
  border: none;
  vertical-align: bottom;
}

/* Fluid-img */
img{
  max-width: 100%;
}

/* body */
body{
  font-family: verdana, sans-serif;
  font-size: 100%;
  line-height: 1.5;
}


/* heading */
h1,h2,h3,h4{
  margin-bottom: 24px;
}

h1{
  font-size: 48px;
  line-height: 1;
}

h2{
  font-size: 36px;
  line-height: 1.33333;
}

h3{
  font-size: 24px;
  line-height: 1;
}

h2,h4{
  font-size: 16px;
  line-height: 1.5;
}

/* Header */
header{
  text-align: center;
  padding-top: 24px;
}

header h1{
  margin-bottom: 24px;
}

header h2{
  color: #62240B;
}

/* Nav */
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{
  width: 25%;
  float:left
}

nav ul li a{
  display: block;
  color: #D8C2A4;
  padding: 12px 0;
}

nav ul li a:hover{
  color: white;
  background-color: #7D4934;
}


/* content */
#content{
  width: 90%;
  margin: 0 auto;
  text-align: center;
}

#content p{
  margin-bottom: 24px;
  text-align: left;
}

#content img{
  margin-bottom: 24px;
  box-shadow: 0 0 12px #000;
}

/* footet */
footer{
  padding: 24px 0;
  color: white;
  text-align: center;
  background: url(../img/footer_bg.png);
}

/* 768px */
@media screen and (min-width: 768px){
#content{
  text-align: left;
}
}

/* 1024px */
@media screen and (min-width: 1024px){
nav ul{
    width: 93.75%;/* 960/1024 */
    margin: 0 auto;
}

#content{
  overflow: hidden;
  width: 93.75%;
}/* 960/1024 */

#content #main, #content #sub{
  float: left;
  margin: 0 1.0416667%;
}/* 10/960 */

#content #main{
  width: 64.5833333%;
}/* 620/960 */

#content #sub{
  width: 31.25%;
}/*300/960*/

footer{
  width: 91.796875%;/* 940/1024 */
  margin: 0 auto;
}
}