100vh:ヒーローヘッダー
ヒーローヘッダー:完成版にリンク
height:100vh という単位
<!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 Pゴシック", "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>