<html lang="ja">
<head>
<meta charset="utf-8">
<title>フルスクリーンレイアウト</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>ロゴ</h1>
<div class="top top-L">
<a href="#">
<div class="cap">
<h2>タイトル</h2>
<p class="txt">モードのハイライトをプレイバック!<br>VOGUE JAPAN撮りおろしのアーカイブビジュアル集。</p>
<p class="more">view more</p>
</div>
</a>
</div>
<div class="top top-R">
<a href="#">
<div class="cap">
<h2>タイトル</h2>
<p class="txt">モードのハイライトをプレイバック!<br>VOGUE JAPAN撮りおろしのアーカイブビジュアル集。</p>
<p class="more">view more</p>
</div>
</a>
</div>
<div class="btm btm-L">
<a href="#">
<div class="cap">
<h2>タイトル</h2>
<p class="txt">モードのハイライトをプレイバック!<br>VOGUE JAPAN撮りおろしのアーカイブビジュアル集。</p>
<p class="more">view more</p>
</div>
</a>
</div>
<div class="btm btm-C">
<a href="#">
<div class="cap">
<h2>タイトル</h2>
<p class="txt">モードのハイライトをプレイバック!<br>VOGUE JAPAN撮りおろしのアーカイブビジュアル集。</p>
<p class="more">view more</p>
</div>
</a>
</div>
<div class="btm btm-R">
<a href="#">
<div class="cap">
<h2>タイトル</h2>
<p class="txt">モードのハイライトをプレイバック!<br>VOGUE JAPAN撮りおろしのアーカイブビジュアル集。</p>
<p class="more">view more</p>
</div>
</a>
</div>
</body>
</html>
スタイルシート
"utf-8";
html,body,h1,h2,p {
margin:0;
padding:0;
line-height:1.0;
}
h1 {
width:160px;
height:160px;
background:url(../img/logo-0717.svg) no-repeat center center/cover;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
z-index:1000;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}
.top {
width:50%;
height:50vh;
float:left;
position:relative;
overflow:hidden;
}
.btm {
width:33.33%;
height:50vh;
float:left;
position:relative;
overflow:hidden;
}
.top-L {
background:url(../img/L1.png) no-repeat center center/cover;
}
.top-R {
background:url(../img/L2.png) no-repeat center center/cover;
}
.btm-L {
background:url(../img/S1.png) no-repeat center center/cover;
}
.btm-C {
background:url(../img/S2.png) no-repeat center center/cover;
}
.btm-R {
background:url(../img/S3.png) no-repeat center center/cover;
}
.cap {
position:absolute;
top:0;
left:0;
width:100%;
height:50vh;
padding-top:100px;
background:rgba(255,0,51,0);
text-align:center;
color:#FFFFFF;
transition:0.2s;
}
.top:hover .cap {
padding-top:0;
background:rgba(255,0,51,1);
}
.btm:hover .cap {
padding-top:0;
background:rgba(255,0,51,1);
}
.cap h2 {
font-size:28px;
padding: 80px 0 50px;
}
.cap .txt {
font-size:18px;
margin-bottom:60px;
line-height:1.5;
}
.cap .more {
width:30%;
margin: 0 auto;
padding: 10px 0;
border-top: 1px solid #FC3;
border-bottom: 1px solid #FC3;
}