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

index.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>2カラムレイアウトRWD風</title>
<link rel="stylesheet" href="rwd.css">
</head>

<body>
<div id="container">
<header>header</header>
<nav>nav</nav>
<div id="wrapper">
<div id="content">content</div>
<div id="sidebar">sidebar</div>
</div><!--/wrapper-->
<footer>footer</footer>
</div><!--/container-->
</body>
</html>

rwd.css

@charset "utf-8";
/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}
header, nav, footer{
  display: block;
}

#container {
  width: 98%;
  padding: 1%;
  background: #FFF;
}
header {
  width: 100%;
  height: 300px;
  background: #09C;
  margin-bottom: 1%;
}
nav {
  width: 100%;
  height: 50px;
  background: #936;
  margin-bottom: 1%;
}
#content {
  width: 100%;
  height: 700px;
  background: #99C;
  margin-bottom: 1%;
}
#sidebar {
  width: 100%;
  height: 200px;
  background:#FF6;
}
footer {
  width: 100%;
  height: 50px;
  background: #0CC;
}
@media screen and (min-width:641px){
body {
   background: #333;
}
#container {
  width: 98%;
  margin: 0 auto;
  padding: 1%;
  background: #FFF;
}
header {
  width: 98%;
  height: 300px;
  background: #09C;
  margin-bottom: 1%;
}
nav {
  width: 98%;
  height: 50px;
  background: #936;
  margin-bottom: 1%;
}
#wrapper {
  overflow: hidden;
  width: 98%;
  margin-bottom: 1%;
}
#content {
  width: 72%;
  height: 500px;
  background: #99C;
  float: left;
}
#sidebar {
  width: 27%;
  height: 500px;
  background:#FF6;
  float: right;
}
footer {
  width: 98%;
  height: 50px;
  background: #0CC;
}
}
@media screen and (min-width:960px){ 
body {
   background: #333;
}
#container {
  width: 960px;
  margin: 0 auto;
  padding: 10px;
  background: #FFF;
}
header {
  width: 960px;
  height: 300px;
  background: #09C;
  margin-bottom: 10px;
}
nav {
  width: 960px;
  height: 50px;
  background: #936;
  margin-bottom: 10px;
}
#wrapper {
  overflow: hidden;
  width: 960px;
  margin-bottom: 10px;
}
#content {
  width: 700px;
  height: 500px;
  background: #99C;
  float: left;
}
#sidebar {
  width: 250px;
  height: 500px;
  background:#FF6;
  float: right;
}
footer {
  width: 960px;
  height: 50px;
  background: #0CC;
}
}