レスポンシブWebデザインの誕生

レスポンシブWebデザインの誕生

  • Responsive Web Design は、2010年イーサン・マルコッテ氏が提唱した制作手法です

レスポンシブWebデザインのデメリット

  1. CSSの記述が複雑になる
  2. 無駄な処理が生じる恐れがある
  3. PCサイトに切り替えられない
  4. IE8以前の古いブラウザをサポートできない
レスポンシブ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)


《例》
https://cdn-ak.f.st-hatena.com/images/fotolife/w/web-0818/20161216/20161216055706.png

<!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 class="wrapper">
<div class="box box1">BOX1</div>
<div class="box box2">BOX2</div>
</div><!-- /.wrapper -->
</body>
</html>

《例》
https://cdn-ak.f.st-hatena.com/images/fotolife/w/web-0818/20161216/20161216055829.png

<!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 class="wrapper">
<div class="box box1">BOX1</div>
<div class="box box2">BOX2</div>
<div class="box box3">BOX3</div>
</div><!-- /.wrapper -->
</body>
</html>

《例》
https://cdn-ak.f.st-hatena.com/images/fotolife/w/web-0818/20161216/20161216061112.png

<!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 class="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>

《例》
https://cdn-ak.f.st-hatena.com/images/fotolife/w/web-0818/20161216/20161216093414.png

<!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 class="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>

《例》
https://cdn-ak.f.st-hatena.com/images/fotolife/w/web-0818/20161216/20161216061112.png


https://cdn-ak.f.st-hatena.com/images/fotolife/w/web-0818/20161216/20161216093414.png


https://cdn-ak.f.st-hatena.com/images/fotolife/w/web-0818/20161217/20161217003045.png

<!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 class="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>

求職者支援訓練 フェリカテクニカルアカデミー