<html lang="ja">
<head>
<meta charset="utf-8">
<title>RWDサイト 応用編</title>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<header></header>
<div id="container">
<div class="top TL box">
<a href="#">
<div class="cap overlay">
<h3>ページタイトル</h3>
<p class="text">ページの説明文、テキストテキストテキスト</p>
<p class="view">view more</p>
</div>
</a></div>
<div class="top TR">
<a href="#">
<div class="cap">
<h3>ページタイトル</h3>
<p class="text">ページの説明文、テキストテキストテキスト</p>
<p class="view">view more</p>
</div>
</a>
</div>
<div class="bottom BL">
<a href="#">
<div class="cap">
<h3>ページタイトル</h3>
<p class="text">ページの説明文、テキストテキストテキスト</p>
<p class="view">view more</p>
</div>
</a></div>
<div class="bottom BC">
<a href="#">
<div class="cap">
<h3>ページタイトル</h3>
<p class="text">ページの説明文、テキストテキストテキスト</p>
<p class="view">view more</p>
</div>
</a></div>
<div class="bottom BR">
<a href="#">
<div class="cap">
<h3>ページタイトル</h3>
<p class="text">ページの説明文、テキストテキストテキスト</p>
<p class="view">view more</p>
</div>
</a></div>
<div class="top TL box">
<a href="#">
<div class="cap overlay">
<h3>ページタイトル</h3>
<p class="text">ページの説明文、テキストテキストテキスト</p>
<p class="view">view more</p>
</div>
</a></div>
<div class="top TR">
<a href="#">
<div class="cap">
<h3>ページタイトル</h3>
<p class="text">ページの説明文、テキストテキストテキスト</p>
<p class="view">view more</p>
</div>
</a>
</div>
<div class="bottom BL">
<a href="#">
<div class="cap">
<h3>ページタイトル</h3>
<p class="text">ページの説明文、テキストテキストテキスト</p>
<p class="view">view more</p>
</div>
</a></div>
<div class="bottom BC">
<a href="#">
<div class="cap">
<h3>ページタイトル</h3>
<p class="text">ページの説明文、テキストテキストテキスト</p>
<p class="view">view more</p>
</div>
</a></div>
<div class="bottom BR">
<a href="#">
<div class="cap">
<h3>ページタイトル</h3>
<p class="text">ページの説明文、テキストテキストテキスト</p>
<p class="view">view more</p>
</div>
</a></div>
</div>
</body>
</html>
@charset "utf-8";
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre,
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
img {
border: 0;
vertical-align: bottom;
}
html, body, #container {
width: 100%;
height: 100%;
}
#conteiner {
position: relative;
overflow: hidden;
}
.top {
width: 50%;
height: 50%;
float: left;
position: relative;
overflow: hidden;
border: 1px solid #FFF;
box-sizing: border-box;
}
.bottom {
width: 33.33%;
height: 50%;
float: left;
position: relative;
overflow: hidden;
border: 1px solid #FFF;
box-sizing: border-box;
}
.TL {
background: url(img/01.png) no-repeat;
background-size: cover;
}
.TR {
background: url(img/02.png) no-repeat 50% 50%;
background-size: cover;
}
.BL {
background: url(img/03.png) no-repeat;
background-size: cover;
}
.BC {
background: url(img/04.png) no-repeat;
background-size: cover;
}
.BR {
background: url(img/05.png) no-repeat;
background-size: cover;
}
.logo img {
width: 200px;
height: 200px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
z-index: 9999;
}
.top a, bottom a {
display: block;
width: 100%;
height: 100%;
}
.cap {
padding-top: 240px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
z-index: 10;
opacity: 1;
transition: .4s ease-in-out;
background: rgba(245,44,67,0);
cursor: default;
}
.cap:hover {
top:-40%;
left: 0;
background: rgba(245,44,67,1);
}
h3{
padding-bottom: 20px;
color: #FFF;
font-size: 22px;
}
.text {
color: #FFF;
font-size: 16px;
padding-bottom: 30px;
}
.view {
width: 40%;
margin: 0 auto;
font-size: 20px;
color: #FFF;
padding: 10px;
border: 1px solid #FFF;
transition: 0.2s ease-in-out;
}
.view:hover{
background:white;
color: #111;
cursor: pointer;
}
header {
width: 20%;
height: 100%;
background: #666;
position: fixed;
top:0;
left: 0;
}
#container {
width: 80%;
float: right;
}
@media screen and (max-width : 767px){
#conteiner {
position: relative;
overflow: inherit;
}
.top, .bottom {
float: none;
width: 100%;
height: 50%;
margin-bottom: 180px;
overflow: visible;
}
.logo img{
width: 100px;
height: 100px;
position: absolute;
top:5px;
left:5px;
margin: 0;
}
.top a, .bottom a {
display: block;
width: 100%;
height: 180px;
}
.cap {
padding-top: 0;
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 180px;
transition: none;
background: rgba(245,44,67,1);
}
.cap:hover {
top: 100%;
left: 0;
}
h3{
padding:20px 0;
color: #FFF;
font-size: 20px;
}
.text {
color: #FFF;
font-size: 14px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 20px;
}
}