読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、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;
} 
}