WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

レスポンシブデザイン モバイルファースト

バイルファーストでスマートフォン用とタブレット用とPC用のレスポンシブデザインを作成しました。

こちらを参考にさせて頂きました。
ascii.jp

f:id:mmmmofu:20150819203852p:plain

http://efu.sakura.ne.jp/web/0818/

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>レスポンシブデザイン(枝豆隊長)</title>
<meta name="viewport" content="width=320,initial-scale=1.0">
<link rel="stylesheet" href="css/style3.css">
</head>
<body>
<header>
<h1><img src="img/logo.png"></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="wrapper">
<div id="content">
<section id="vitamin">
<h3>枝豆の栄養素はスゴい</h3>

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

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

<h3>ずんだ</h3>
<p><img src="img/edamame02.jpg" alt="ずんだ"></p>
<p>ゆでた枝豆をすり潰したもの。ずんだを餅にまぶしたものは「ずんだ餅」といって宮城県の特産品です。主に夏の時期に食べられます。非常に枝豆の風味が良いのが特徴です。</p>
</section>
</div><!-- /#content -->
<div id="sidebar">
<h4>枝豆隊隊長</h4>
<p><img src="img/taityou.jpg" alt="枝豆隊長"></p>
<p>枝豆隊隊長は、枝豆について知識をもち、新しい枝豆料理につねにチャレンジしています。</p>
</div><!-- /#sidebar -->
</div><!-- /#wrapper -->
<footer>
<p><small>2004-2015&copy;枝豆隊</small></p>
</footer>
</body>
</html>
@charset "utf-8";

html, body, div, h1, h2, h3, h4, p, small, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    'Hiragino Kaku Gothic ProN',
    Meiryo,
    sans-serif;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}
p {
  line-height: 1.4;
}
img {
  max-width: 100%;
  border: none;
  vertical-align: bottom;
}
header, h1,h2,h3,h4,p,#wrapper {
  margin-bottom: 20px;
}
header {
  width: 100%;
  margin-top: 20px;
  text-align: center;
}
nav {
  width: 100%;
  background: #755349;
}
ul {
  width: 100%;
  margin:0 auto;
  overflow: hidden;
}
li {
  float: left;
  width: 25%;
}
li a {
  color: #FFF;
  border-right: 1px #FFF solid;
  text-align: center;
  display: block;
  padding: 14px;
}
li:first-child a {
  border-left: 1px #FFF solid;
}
li a:hover {
  background: #C33;
}
#wrapper {
  width: 90%;
  margin: 0 auto;
}
footer {
  width: 100%;
  text-align: center;
  background: #629B3D;
  color: #FFF;
  padding: 14px;
}
@media screen and (min-width:640px){
body {
  font-size: 16px;
}
#wrapper {
  overflow: hidden;
}
#content {
  width: 64.58%;
  float: left;  
}
#sidebar {
  width: 31.25%;
  float: right;
}
}
@media screen and (min-width:960px){
#wrapper {
  width: 960px; 
}
#content {
  margin-left: 10px;
}
#sidebar {
  margin-right: 10px;
}
ul {
  width: 960px;
}
}


borderはaに入れない場合はbox-sizeing:border-box;を指定する。
max-width:100% 画像のサイズをブラウザーのウィンドウ幅に合わせるフルードイメージ
#contentと#sidebarの計算式 各横幅÷960(#wrapperの横幅)