CSS：レスポンシブウェブデザイン - Webデザインのこと、いろいろ

RWD：完成版にリンク

★レスポンシブルレイアウトの際、どこに%を指定するのか
f:id:sankoblog:20160404010125p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>RWD</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="container">
<header><h1>header</h1></header>
<nav>
<ul>
<li><a href="#">ボタン1</a></li>
<li><a href="#">ボタン2</a></li>
<li><a href="#">ボタン3</a></li>
<li><a href="#">ボタン4</a></li>
</ul>
</nav>
<div id="wrapper">
<div id="content"></div>
<div id="sidebar"></div>
</div><!--#wrapper-->
<footer></footer>
</div><!--#container-->
</body>
</html>

@charset "utf-8";
/* CSS Document */
/*reset*/
html,body,h1,h2,p,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;
	color: #FFF;
	}
body {
	font-size: 16px;
	}
img {
	border: none;
	vertical-align: bottom;
	}
/*----------------------------------*/
/* font-size */
html { font-size: 62.5%; }  /* =10px */
body { font-size: 16px; font-size: 1.6rem; }  /* =16px */
h1 { font-size: 32px; font-size: 3.2rem; }
h2 { font-size: 24px; font-size: 2.4rem; }
p { font-size: 16px; font-size: 1.6rem }
/*---------PCレイアウト--------*/
body { background: #666; }
#container {
	width: 980px;
	margin: 0 auto;
	padding: 10px;
	background: #FFF;
}
header {
	height: 300px;
	margin-bottom: 10px;
	background: #9F6;
}
nav {
	width: 980px;
	overflow: hidden;
	height: 50px;
	margin-bottom: 10px;
	background: #369;
}
nav li {
	float: left;
	width: 25%;
	text-align: center;
	border-right: 4px solid #FFF;
	box-sizing: border-box;
}
nav li a {
	display: block;
	line-height: 50px;
}
nav li:last-child {
	border: none;
}
#wrapper {
	overflow: hidden;
	margin-bottom: 10px;
}
#content {
	float: right;
	width: 700px;
	height: 400px;
	background: #699;
}
#sidebar {
	float: left;
	width: 270px;
	height: 400px;
	background: #CC6;
}
footer {
	height: 50px;
	background: #C96;
}
 /*・・メディアクエリ対応・・*/
 @media screen and (max-width: 999px) {
#container {
	width: 98%;
	margin: 0 auto;
	padding: 1%;
	background: #F69;
}
header {
	height: 200px;  /*高さは自由だ～～*/
	margin-bottom: 1%;
	}
nav {
	margin-bottom: 1%;
}
#wrapper {
	margin-bottom: 1%;
}
#content {
	width: 70%;
}
#sidebar {
	width: 29%;  /*padding分を含まない*/
}
nav {
	width: 100%;
	margin-bottom: 1%;
}
 }
  @media screen and (max-width: 767px) {
#container {
	width: 98%;
	padding: 1%;
	background: #CF3;
}
header {
	height: 200px;  /*高さは自由だ～～*/
	margin-bottom: 1%;
	}
nav {
	margin-bottom: 1%;
}
#content {
	width: 100%;
	margin-bottom: 1%;
	float: none;
}
#wrapper {
	margin-bottom: 1%;
}
#sidebar {
	width: 100%;  /*padding分を含まない*/
	float: none;
}
nav {
	height: 100px;
}
nav li {
	width: 50%;
	border-bottom: 4px solid #FFF;
}
nav li:last-child {
	border-right: 4px solid #FFF;
}
 }