100vh：ヒーローヘッダー - Webデザインのこと、いろいろ

ヒーローヘッダー：完成版にリンク
height:100vh という単位

f:id:sankoblog:20160707222317p:plain

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ヒーローヘッダー</title>
<style>
html,body,h1,p {
	margin: 0;
	padding: 0;
}
#box1 {
	background: url(img/hato.JPG) no-repeat;
	width: 100%;
	height: 100vh;
	background-size: cover;
}
#box2 {
	background: url(img/rain.jpg) no-repeat;
	width: 100%;
	height: 100vh;
	background-size: cover;
}
p {
	color: #FFF;
	font-size: 3rem;
	text-align: center;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

@media screen and (max-width:767px) {
	#box1 {
		height: 30vh;
	}
	#box2 {
		height: 70h;
	}
}
</style>
</head>

<body>
<div id="box1"><p>きょうの鳩だより</p></div>
<div id="box2"><p>雨の日はお休みです</p></div>
</body>
</html>