VHを使った全画面ページのスマホ対応
PCのウィンドウサイズ一杯のページからスマホ用のページを作成しました。
PC用の画面
PC用の画面（ウィンドウの横幅を狭くした状態）
スマホ用の画面
HTML
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>VOGUE模擬サイト</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1><img src="img/vogueLogo.svg"><a href="#">vogueの模擬サイト</a></h1>
<div class="top img1">
<div class="cap">
<h2>From Our Archives</h2>
<p class="description">モードのハイライトをプレイバック！<br>VOGUE JAPAN撮りおろしのアーカイブビジュアル集。</p>
<p class="more"><a href="#">view more</a></p>
</div><!--/.cap-->
</div>
<div class="top img2">
<div class="cap">
<h2>From Our Archives</h2>
<p class="description">モードのハイライトをプレイバック！<br>VOGUE JAPAN撮りおろしのアーカイブビジュアル集。</p>
<p class="more"><a href="#">view more</a></p>
</div><!--/.cap-->
</div>
<div class="bottom img3">
<div class="cap">
<h2>From Our Archives</h2>
<p class="description">モードのハイライトをプレイバック！<br>VOGUE JAPAN撮りおろしのアーカイブビジュアル集。</p>
<p class="more"><a href="#">view more</a></p>
</div><!--/.cap-->
</div>
<div class="bottom img4">
<div class="cap">
<h2>From Our Archives</h2>
<p class="description">モードのハイライトをプレイバック！<br>VOGUE JAPAN撮りおろしのアーカイブビジュアル集。</p>
<p class="more"><a href="#">view more</a></p>
</div><!--/.cap-->
</div>
<div class="bottom img5">
<div class="cap">
<h2>From Our Archives</h2>
<p class="description">モードのハイライトをプレイバック！<br>VOGUE JAPAN撮りおろしのアーカイブビジュアル集。</p>
<p class="more"><a href="#">view more</a></p>
</div><!--/.cap-->
</div>
</body>
</html>
@charset "utf-8";
/*Reset CSS*/
html,body,h1,h2,p {
margin: 0;
padding: 0;
line-height: 1.0;
font-family: "游ゴシック", YuGothic,
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
font-weight: 500;
}
a {
text-decoration: none;
text-align: center;
color: #C9B274;
}
/*PCレイアウト部分*/
h1 {
width:168px;
height:168px;
background:#FFFFFF;
position:absolute;
top:10px;
right:10px;
bottom:10px;
left:10px;
margin:auto;
}
h1 a {
display:block;
white-space:nowrap;
text-indent:100%;
overflow:hidden;
}
.top {
width: 50%;
height: 50vh;
float: left;
overflow: hidden;
}
.bottom {
width: 33.33%;
height: 50vh;
float: left;
overflow: hidden;
}
.img1 {
background: url(../img/space1.png) no-repeat center center/cover;
}
.img2 {
background: url(../img/space2.png) no-repeat center center/cover;
}
.img3 {
background: url(../img/space3.png) no-repeat center center/cover;
}
.img4 {
background: url(../img/space4.png) no-repeat center center/cover;
width:33.34%;
}
.img5 {
background: url(../img/space5.png) no-repeat center center/cover;
}
/*ホバーアクション部分*/
.cap {
width: 100%;
padding-top: 28vh;
padding-bottom: 5vh;
background: rgba(0,127,182,0);
cursor: pointer;
transition: ease 0.2s;
}
.cap:hover {
/* height: 50vh;*//*hoverした時のずれを防止する*/
padding-top: 11vh;
background: rgba(0,127,182,0);
}
h2, .description {
text-align: center;
color:#FFF;
}
h2 {
margin-bottom:5vh;
}
.description {
line-height:1.7;
font-size:14px;
margin-bottom:8vh;
}
.more {
width:150px;
margin:0 auto;
padding:10px;
border-top:1px solid #C9B274;
border-bottom:1px solid #C9B274;
text-align:center;
}
@media screen and (max-width:767px){
/*スマホ用*/
h1 {
position: static;
width:44px;
height: 44px;
margin: 8px;
}
.top, .bottom {
width: 100%;
height: 200px;
float: none;
overflow: visible;
margin-bottom: 200px;
}
/*ホバーアクション部分*/
.cap {
padding-top: 215px;
padding-bottom: 10px;
cursor: default;
}
.cap:hover {
padding-top: 215px;
}
h2, .description {
color:#000;
}
h2 {
margin-bottom:10px;
}
.description {
line-height:1.7;
font-size:14px;
margin-bottom: 8px;
padding: 12px;
}
}
