レスポンシブWebデザインの考え方

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

メディアクエリを設定
ブレイクポイント（767px 以下の場合）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>レスポンシブWebデザイン</title>
<style>
#container {
  width: 80%;
  height: auto;
  margin: 0 auto;
}
.box {
  text-align: center;
  line-height: 100px;
}
.wrapA {
  overflow: hidden;
}
.box1 {
  width: 100%;
  height: 100px;
  background: #FBE4EE;
  border: 4px solid #EA6094;
  box-sizing: border-box; 
}
.box2, .box3 {
  float: left;
  height: 300px;
  box-sizing: border-box; 
}
.box2 {
  width: 75%;
  background: #F3F7E0;
  border: 4px solid #B5D22F;
}
.box3 {
  width: 25%;
  background: #EDF7FD;
  border: 4px solid #4188C9;
}

@media screen and (max-width:797px){
  .wrapA>.box {
    width: 100%;
    height: 100px;
    float:none;
  }
}
</style>
</head>
<body>
<div id="container">
<div class="box box1">BOX1</div>
<div class="wrapA">
<div class="box box2">BOX2</div>
<div class="box box3">BOX3</div>
</div><!-- /.wrapA -->
</div><!-- /#container -->
</body>
</html>

f:id:web-design-lesson:20160528005213j:plain

f:id:web-design-lesson:20160528105258j:plain

レスポンシブWebデザインの応用

上記「基礎」の内容を変更します
「.box2」「.box3」「.box4」を変更します

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>レスポンシブWebデザイン</title>
<style>
#container {
  width: 80%;
  height: auto;
  margin: 0 auto;
}
.box {
  text-align: center;
  line-height: 100px;
}
.wrapA {
  overflow: hidden;
}
.box1 {
  width: 100%;
  height: 100px;
  background: #FBE4EE;
  border: 4px solid #EA6094;
  box-sizing: border-box; 
}
.box2, .box3, .box4 {
  float: left;
  height: 300px;
  box-sizing: border-box; 
}
.box2 {
  width: 20%;
  background: #FFFBCB;
  border: 4px solid #FFE500;
}
.box3 {
  width: 60%;
  background: #EDF7FD;
  border: 4px solid #4188C9;
}
.box4 {
  width: 20%;
  background: #F3F7E0;
  border: 4px solid #B5D22F;
}

@media screen and (max-width:797px){
  .wrapA>.box {
    width: 100%;
    height: 100px;
    float:none;
  }
}
</style>
</head>
<body>
<div id="container">
<div class="box box1">BOX1</div>
<div class="wrapA">
<div class="box box2">BOX2</div>
<div class="box box3">BOX3</div>
<div class="box box4">BOX4</div>
</div><!-- /.wrapA -->
</div><!-- /#container -->
</body>
</html>

f:id:web-design-lesson:20160528125341j:plain

f:id:web-design-lesson:20160528125356j:plain

文書構造を整理する

メインコンテンツである「BOX2」を優先する（並び順を変える）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>レスポンシブWebデザインの考え方（１）</title>
<style>
#container {
  width: 50%;
  height: auto;
  margin: 50px auto;
}
.box {
  height: 300px;
  text-align: center;
  line-height: 300px;
}
.wrapA {
  overflow: hidden;
}
.wrapA>.box {
  float: left;
  box-sizing: border-box;  /*paddingとborderをwidthとheightに含める*/
}
.wrapB {
  float: left;
  overflow: hidden;
  width: 80%;
}
.wrapB>.box {
  float: right;
  box-sizing: border-box;  /*paddingとborderをwidthとheightに含める*/
}
.box1 {
  height: 50px;
  background: #FFCCFF;
  border: 4px solid #FF99CC;
  line-height: 50px;
}
.box2 {
  width: 75%;
  background: #FFFBCB;
  border: 4px solid #FFE500;
}
.box3 {
  width: 25%;
  background: #EDF7FD;
  border: 4px solid #4188C9;
}
.box4 {
  width: 20%;
  background: #D9F8BA;
  border: 4px solid #66CC00;
}
.box5 {
  height: 50px;
  background: #F4E7BD; 
  border: 4px solid #FF9900;
  line-height: 50px;
}
@media screen and (max-width:797px) {
  #container {
  width: 100%;
  }
  .wrapA>.box{
  width: 100%;
  float: none;
  }
  .wrapB, .wrapB>.box {
  width: 100%;
  float: none;
  }
}
</style>
</head>
<body>
<div id="container">
<div class="box box1">BOX1</div>
<div class="wrapA">
<div class="wrapB">
<div class="box box2">BOX2</div>
<div class="box box3">BOX3</div>
</div><!-- /.wrapB -->
<div class="box box4">BOX4</div>
</div><!-- /.wrapA -->
<div class="box box5">BOX5</div>
</div><!-- /#container -->
</body>
</html>

f:id:web-design-lesson:20160528131539j:plain

f:id:web-design-lesson:20160528131608j:plain

バリエーション

「wrapB」と「BOX4」の float:none にした場合
「wrapB」と「BOX4」の幅を「100％」に変更

f:id:web-design-lesson:20160528134843j:plain

「BOX2」と「BOX3」の float:none にし、幅を100％にした場合
「BOX4」の高さは、「BOX2の高さ」+「BOX3の高さ」に変更

f:id:web-design-lesson:20160528135822j:plain