レスポンシブWebデザインの基本構造

レスポンシブWebデザインの基本構造を作る

768px以上をPC用とする

モバイル向けメディアクエリのwidthの決め方

タブレット（iPad）	768px
スマートフォン横	480px・568pxなど
スマートフォン縦	320px・360pxなど

/* メディアクエリの設定 */

@media (orientation: portrait) {
  body {background-color: #ADCD7D;}
}

@media (orientation: landscape) {
  body {background-color: #E6AB13;}
}

スマートフォンになったら

@media only screen and (max-width: 480px)

タブレットじゃなくなったら(=「スマートフォンになったら」)

@media only screen and (max-width: 767px)

《例》
f:id:web-0818:20161216055706p:plain

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>タブレットじゃなくなったら</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
  margin: 0;
  padding: 0;
}
#wrapper {
  overflow: hidden;
  border: solid 5px #00BFFF;
}
.box {
  float: left;
  width: 48%;
  margin-left: 4%;
  line-height: 200px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  box-sizing: border-box;
}
.box:first-child {
  margin-left: 0;
}
.box1 {background-color: #ADCD7D;}
.box2 {background-color: #E6AB13;}

@media only screen and (max-width: 767px) {

.box {
  float: none;
  width: 100%;
  margin: 0;
}

}
</style>
</head>
<body>
<div id="wrapper">
<div class="box box1">BOX1</div>
<div class="box box2">BOX2</div>
</div><!-- /#wrapper -->
</body>
</html>

《例》
f:id:web-0818:20161216055829p:plain

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>タブレットじゃなくなったら</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
  margin: 0;
  padding: 0;
}
#wrapper {
  overflow: hidden;
  border: solid 5px #00BFFF;
}
.box {
  float: left;
  width: 31%;
  margin-left: 3.5%;
  line-height: 200px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  box-sizing: border-box;
}
.box:first-child {
  margin-left: 0;
}
.box1 {background-color: #ADCD7D;}
.box2 {background-color: #E6AB13;}
.box3 {background-color: #72CCF5;}

@media only screen and (max-width: 767px) {

.box {
  float: none;
  width: 100%;
  margin: 0;
}

}
</style>
</head>
<body>
<div id="wrapper">
<div class="box box1">BOX1</div>
<div class="box box2">BOX2</div>
<div class="box box3">BOX3</div>
</div><!-- /#wrapper -->
</body>
</html>

《例》
f:id:web-0818:20161216061112p:plain

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>タブレットじゃなくなったら</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
  margin: 0;
  padding: 0;
}
#wrapper {
  overflow: hidden;
  border: solid 5px #00BFFF;
}
.box {
  float: left;
  width: 23.05%;
  margin-left: 2.6%;
  line-height: 200px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  box-sizing: border-box;
}
.box:first-child {
  margin-left: 0;
}
.box1 {background-color: #ADCD7D;}
.box2 {background-color: #E6AB13;}
.box3 {background-color: #72CCF5;}
.box4 {background-color: #ECC0EF;}

@media only screen and (max-width: 767px) {

.box {
  float: none;
  width: 100%;
  margin: 0;
}

}
</style>
</head>
<body>
<div id="wrapper">
<div class="box box1">BOX1</div>
<div class="box box2">BOX2</div>
<div class="box box3">BOX3</div>
<div class="box box4">BOX4</div>
</div><!-- /#wrapper -->
</body>
</html>

《例》
f:id:web-0818:20161216093414p:plain

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>タブレットじゃなくなったら</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
  margin: 0;
  padding: 0;
}
#wrapper {
  overflow: hidden;
  border: solid 5px #00BFFF;
}
.cols {
  overflow: hidden;
}
.box {
  float: left;
  width: 48%;
  margin-left: 4%;
  line-height: 200px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  box-sizing: border-box;
}
.box:first-child {
  margin-left: 0;
}
.box1 {background-color: #ADCD7D;}
.box2 {background-color: #E6AB13;}
.box3 {background-color: #72CCF5;}
.box4 {background-color: #ECC0EF;}

@media only screen and (max-width: 767px) {

.box {
  float: none;
  width: 100%;
  margin: 0;
}

}
</style>
</head>
<body>
<div id="wrapper">
<div class="cols">
<div class="box box1">BOX1</div>
<div class="box box2">BOX2</div>
</div>
<div class="cols">
<div class="box box3">BOX3</div>
<div class="box box4">BOX4</div>
</div>
</div><!-- /#wrapper -->
</body>
</html>

《例》
f:id:web-0818:20161216061112p:plain

f:id:web-0818:20161216093414p:plain

f:id:web-0818:20161217003045p:plain

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>レスポンシブWebデザイン</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
  margin: 0;
  padding: 0;
}
#wrapper {
  overflow: hidden;
  border: solid 5px deepskyblue;
}
.cols {
  overflow: hidden;
  float: left;
  width: 49%;
  margin-left: 2%;
}
.box {
  float: left;
  width: 48%;
  margin-left: 4%;
  line-height: 200px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  box-sizing: border-box;
}
.box:first-child, .cols:first-child {
  margin-left: 0;
}
.box1 {background-color: #ADCD7D;}
.box2 {background-color: #E6AB13;}
.box3 {background-color: #72CCF5;}
.box4 {background-color: #ECC0EF;}

@media only screen and (max-width: 767px) {

.cols {
  overflow: hidden;
  float: none;
  width: 100%;
  margin-left: 0;
}
.box {
  float: left;
  width: 48%;
  margin-left: 4%;
  line-height: 200px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  box-sizing: border-box;
}

}

@media only screen and (max-width: 480px) {

.box {
  float: none;
  width: 100%;
  margin: 0;
}

}
</style>
</head>
<body>
<div id="wrapper">
<div class="cols">
<div class="box box1">BOX1</div>
<div class="box box2">BOX2</div>
</div>
<div class="cols">
<div class="box box3">BOX3</div>
<div class="box box4">BOX4</div>
</div>
</div><!-- /#wrapper -->
</body>
</html>