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

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>フルスクリーン画像の設定</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="style4.css">
</head>
<body>
<h1><img src="img/logo.svg" alt=""></h1>

<div id="container">

<div class="top tL">
<div class="caption">
<h2 class="phtitle">写真のタイトル</h2>
<p class="description">写真の内容説明の文章</p>
<p class="navbtn"><a href="#">詳細</a></p>
</div><!-- /.caption-->
</div><!-- /.tL -->

<div class="top tR">
<div class="caption">
<h2 class="phtitle">写真のタイトル</h2>
<p class="description">写真の内容説明の文章</p>
<p class="navbtn"><a href="#">詳細</a></p>
</div><!-- /.caption-->
</div><!-- /.tR -->

<div class="bottom bL">
<div class="caption">
<h2 class="phtitle">写真のタイトル</h2>
<p class="description">写真の内容説明の文章</p>
<p class="navbtn"><a href="#">詳細</a></p>

</div><!-- /.caption-->
</div><!-- /.tL -->

<div class="bottom bC">
<div class="caption">
<h2 class="phtitle">写真のタイトル</h2>
<p class="description">写真の内容説明の文章</p>
<p class="navbtn"><a href="#">詳細</a></p>
</div><!-- /.caption-->
</div><!-- /.tC -->

<div class="bottom bR">
<div class="caption">
<h2 class="phtitle">写真のタイトル</h2>
<p class="description">写真の内容説明の文章</p>
<p class="navbtn"><a href="#">詳細</a></p>
</div><!-- /.caption-->
</div><!-- /.tR -->

</div><!-- /#container -->
</body>
</html>

@charset "utf-8";

/* reset
--------------------------------------------------*/
html, body, h1, h2, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
a {
  text-decoration:none;
  color:#C9B274;
}
img {
  border: none;
  vertical-align:bottom;
  max-width:100%;
}

/* layout
--------------------------------------------------*/
.top {
  width:50%;
  height:50vh;
  float:left;
}
.bottom {
  width:33.33%;
  height:50vh;
  float:left;
}
.tL {
  background: url(img/01.png) no-repeat center center/cover;
}
.tR {
  background: url(img/02.png) no-repeat center center/cover;
}
.bL {
  background: url(img/03.png) no-repeat center center/cover;
}
.bC {
  background: url(img/04.png) no-repeat center center/cover;
}
.bR {
  background: url(img/05.png) no-repeat center center/cover;
}

/* hoverAction
--------------------------------------------------*/
.caption {
width: 100%;
height: 100%;
padding-top: 300px;
background: rgba(255,66,10,1,0);
transition: 0.2s;
}
.caption:hover {
padding-top: 100px;
background:rgba(255,66,10,0.7);
}
.phtitle {
  text-align:center;
  color:#FFF;
  margin-bottom:20px;
}
.description {
  line-height: 1.4;
  text-align:center;
  color:#FFF;
  margin-bottom: 80px;
 }
.navbtn {
  text-align:center;
}
.navbtn>a {
  margin: 0 auto;
  padding: 10px 80px;
  color: #FFF;
  border: 2px solid #FFF;
  box-sizing: border-box;
}
h1 {
width: 120px;
height: 120px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}


@media screen and (max-width:767px) {
h1 {
  width:120px;
  height:120px;
  position: static;
}
.top {
  width:100%;
  height:360px;
  float:none;
  margin-bottom:140px;
  position:relative;
}
.bottom {
  width:100%;
  height:360px;
  float:none;
  margin-bottom:140px;
  position:relative;
}
.caption {
  width:100%;
  height:100px;
  padding-top:20px;
  transition:none;
  position:absolute;
  top:100%;
  left:0;
  color:#000;
}
a {
color:#222;
}
.caption:hover {
padding-top:20px;
background:transparent;
}
.phtitle {
  margin-bottom: 10px;
  color:#000;
 }
.description {
  margin-bottom: 20px;
  color:#000;
 }
 .navbtn>a {
  color:#000;
  border: 1px solid #000;
}

}