レスポンシブデザインの復習 - WEBサイト制作の勉強

豆はカラダにイイ

ホーム

枝豆一覧

枝豆隊

アクセス

枝豆の栄養素はスゴい

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

代表的な豆料理

枝豆

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

ずんだ

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

枝豆隊隊長

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

2004-2015©枝豆隊

index.html

<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><!-- /header -->

<div id="wrapper">
<div id="content">
<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><!--/#content-->

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

<footer>
<p><small>2004-2015&copy;枝豆隊</small></p>
</footer><!-- /footer -->
</body>

style.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;
}
article, aside, dialog, figure, footer, header,
menu, nav, section { display: block; }

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

/* 共通 */
body {
  font-family : verdana, sans-serif;
  font-size : 100%;
  line-height : 1.5;
}
h1,h2,h3,h4 {
  margin-bottom : 24px;
}
h1 {
  font-size : 48px; 
  line-height : 1;
}
h2 {
  font-size : 36px;
  line-height : 1.3333;
}
h3 {
  font-size : 24px;
  line-height : 1;
}
h4 {
  font-size : 16px;
  line-height : 1.5;
}
header {
  text-align : center;
  padding-top : 24px;
}
header h1 {
  margin-bottom : 24px;
}
header h2 {
  color : #62240B;
}
nav {
  width: 100%;
  margin-bottom : 24px;
  background-color: #7D4934;
  background: -webkit-linear-gradient(top, rgba(81,24,8,0.71) 0%,rgba(91,25,0,1) 100%);
  background: linear-gradient(to bottom, rgba(81,24,8,0.71) 0%,rgba(91,25,0,1) 100%);
}

/*PC用*/
nav ul {
  width :960px;
  margin : 0 auto;
  overflow : hidden;
}
nav ul li {
  width : 25%;
  float : left;
  border-right: 1px solid #FFF;
  box-sizing: border-box;
}
nav ul li:first-child {
  border-left: 1px solid #FFF;
}
nav ul li a {
display : block;
color : #D8C2A4;
padding : 12px 0;
}
nav ul li a:hover {
color : #FFFFFF;
background-color : #7D4934;
}
#wrapper {
  overflow : hidden;
  width :940px;
  margin: 0 auto;
  padding: 0 10px;
}
#wrapper p { 
  margin-bottom : 24px;
  text-align : left;
}
#wrapper img { 
  margin-bottom : 24px; 
  box-shadow : 0 0 12px #000;
}
#content {
  width : 620px;
  float: left;
}
#sidebar {
  width : 300px;
  float: right;

} 
footer {
  width: 100%;
  padding : 24px 0;
  color : #FFF;
  text-align : center;
  background : #629E3C;
}


/*タブレット用*/ 
@media screen and (max-width : 959px){
  
nav ul {
  width :100%;
}
#wrapper {
  width: 97.9%; /*940px÷960px*/
  padding: 0 1.05%; /*100%-97.9%=2.1%÷2*/
}
#content {
  width : 64.58%;  /*620px÷960px(親要素のwidth)*/
}
#sidebar {
  width : 31.25%; /*300px÷960px(親要素のwidth)*/
} 
}
/*スマホ用*/
@media screen and (max-width : 640px) {
#wrapper {
  width : 90%;
  margin : 0 auto;
  text-align : center;
  }
  #content, #sidebar {
    width: 100%;
    float: none;
}
}

モバイルファーストの場合

@charset "utf-8";

/* Reset */
html, body, div, h1, h2, h3, h4, p, ul, li, a  {
  margin: 0;
  padding: 0
}
a {
  text-decoration : none;
}
ul {
  list-style : none;
}
img {
  border: none;
  vertical-align: bottom;
}
 article, aside, dialog, figure, footer, header,
menu, nav, section { display: block; }

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

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


/* スマホ */
h1,h2,h3,h4 {
  margin-bottom : 24px;
}
h1 {
  font-size : 48px; 
  line-height : 1;
}
h2 {
  font-size : 36px;
  line-height : 1.3333;
}
h3 {
  font-size : 24px;
  line-height : 1;
}
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: -webkit-linear-gradient(top, rgba(81,24,8,0.71) 0%,rgba(91,25,0,1) 100%);
  background: linear-gradient(to bottom, rgba(81,24,8,0.71) 0%,rgba(91,25,0,1) 100%);
}
nav ul {
  width: 100%;
  overflow : hidden;
}
nav ul li {
  width : 25%;
  float : left;
  border-right: 1px solid #FFF;
  box-sizing: border-box;
}
nav ul li:first-child {
  border-left: 1px solid #FFF;
}
nav ul li a {
display : block;
color : #D8C2A4;
padding : 12px 0;
}
nav ul li a:hover {
color : #FFFFFF;
background-color : #7D4934;
}

#wrapper {
  width : 90%;
  margin : 0 auto;
  text-align : center;
  }
#wrapper p { 
  margin-bottom : 24px;
  text-align : left;
}
#wrapper img { 
  margin-bottom : 24px; 
  box-shadow : 0 0 12px #000;
}

footer {
  padding : 24px 0;
  color : white;
  text-align : center;
  background : #629E3C;
}
/*タブレット用*/ 
@media screen and (min-width : 641px){
#wrapper {
  width: 97.9%; /*940px÷960px*/
  padding: 0 1.05%; /*100%-97.9%=2.1%÷2*/
  overflow: hidden;
  text-align: left;
}
#content {
  width : 64.58%;  /*620px÷960px(親要素のwidth)*/
  float: left;
}
#sidebar {
  width : 31.25%; /*300px÷960px(親要素のwidth)*/
  float: right;
} 
}

/*PC用*/
@media screen and (min-width : 960px) {
nav {
  width: 100%;
}
nav ul {
  width :960px;
  margin : 0 auto;
  background: #333;
}
#wrapper {
  overflow : hidden;
  width :940px;
  padding: 0 10px;
  margin: 0 auto;
}
#content {
  width : 620px;
  float: left;
}
#sidebar {
  width : 300px;
  float: right;
} 
}