レスポンシブWebデザイン - 演習（２）

ブラウザの高さを取得する単位「vh（viewport height）」

<!DOCTYPE html>
<html lang="ja">
<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;
}
.box {
  box-sizing: border-box;
}
.boxA {
  width:50%;
  height:50vh;
  float:left;
  overflow:hidden;
  background-color: #E6F7D9;
  border: 16px solid #A2E65A;
}
.boxB {
  width:33.33%;
  height:50vh;
  float:left;
  overflow:hidden;
  background-color: #E9F5FF;
  border: 16px solid #77C9F0;
}
</style>
</head>
<body>
<div id="container">
<div class="block">
<div class="box boxA"></div>
<div class="box boxA"></div>
</div>
<div class="block">
<div class="box boxB"></div>
<div class="box boxB"></div>
<div class="box boxB"></div>
</div>
</div>
</body>
</html>

f:id:web-0818:20170118003938j:plain

headerを追加

f:id:web-0818:20170118005025j:plain

<!DOCTYPE html>
<html lang="ja">
<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;
}
.box, .header {
  box-sizing: border-box;
}
.boxA {
  width:50%;
  height:50vh;
  float:left;
  overflow:hidden;
  background-color: #E6F7D9;
  border: 16px solid #A2E65A;
}
.boxB {
  width:33.33%;
  height:50vh;
  float:left;
  overflow:hidden;
  background-color: #E9F5FF;
  border: 16px solid #77C9F0;
}
.header {
  width: 160px;
  height: 160px;
  background-color: #FFF;
  border: 16px solid #898989;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
</style>
</head>
<body>
<div id="container">
<header class="header"></header>
<div class="block">
<div class="box boxA"></div>
<div class="box boxA"></div>
</div>
<div class="block">
<div class="box boxB"></div>
<div class="box boxB"></div>
<div class="box boxB"></div>
</div>
</div>
</body>
</html>

スマートフォンに対応させる

f:id:web-0818:20170118010323j:plain

<!DOCTYPE html>
<html lang="ja">
<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;
}
.box, .header {
  box-sizing: border-box;
}
.boxA {
  width:50%;
  height:50vh;
  float:left;
  overflow:hidden;
  background-color: #E6F7D9;
  border: 16px solid #A2E65A;
}
.boxB {
  width:33.33%;
  height:50vh;
  float:left;
  overflow:hidden;
  background-color: #E9F5FF;
  border: 16px solid #77C9F0;
}
.header {
  width: 160px;
  height: 160px;
  background-color: #FFF;
  border: 16px solid #898989;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

@media screen and (max-width:767px) {
  
.boxA, .boxB {
  width:100%;
}
.header {
  position: static;
}

}
</style>
</head>
<body>
<div id="container">
<header class="header"></header>
<div class="block">
<div class="box boxA"></div>
<div class="box boxA"></div>
</div>
<div class="block">
<div class="box boxB"></div>
<div class="box boxB"></div>
<div class="box boxB"></div>
</div>
</div>
</body>
</html>