# CSS 全画面に背景色(backgrond-color)を指定する
ランディングページで全画面(フルスクリーン)に背景色を指定したり、モーダルやドロワーナビの背景全体に半透明な背景色を重ねる(オーバーレイ)方法をまとめる。
# 用意
ベースとなるHTML、CSSを用意する。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
</head>
<body>
こんにちは
</body>
</html>
style.css
ディレクトリ
.
├── index.html
└── style.css
ブラウザで表示確認
# body全体に背景色を指定する
ランディングページのような全画面のデザインが決まっている場合に、<body>全体に対して背景色を指定する方法をみていく。
# 100vh、100vwで全画面に背景を表示する
HTMLはbody直下にdivを用意してfull-pageクラスをつけておく。
HTML抜粋
<body>
<div class="full-page">
こんにちは
</div>
</body>
bodyのmargin、paddingを0にしてリセットした上で、full-pageクラスのwidth、heightにビューポート(画面表示領域)に対して100%、すなわち100vw、100vhを指定する。
body {
margin: 0;
padding: 0;
}
.full-page {
width: 100vw;
height: 100vh;
background: rgba(0,0,0,.3);
}
# html, bodyに100%で全画面に背景を表示する
full-pageクラスにheightを親の要素に対して100%の高さとする。
full-pageクラスのついているdivの親要素としてbody、htmlがいるのでこの2つにもheight: 100%を指定する。
HTML抜粋
<body>
<div class="full-page">
こんにちは
</div>
</body>
html, body {
height: 100%;
}
.full-page {
height: 100%;
background: rgba(0,0,0,.3);
}
# height: 100vh と height: 100%の違い
height: 100vhはビューポート(表示領域)の100%の高さheight: 100%は親要素の100%の高さ
そのため、height: 100%の場合は、親要素であるhtml、bodyにもheight: 100%を指定しておく必要がある。
# width: 100vw と width: 100%の違い
width: 100vwはビューポート(表示領域)の100%の幅。ただし、スクロールバーの幅を含むwidth: 100%は親要素の100%の幅
ビューポートはスクロールバーを含んだ値になる。したがって、スクロールバーが常に表示されているブラウザでは意図せず横スクロールが表示されることがある。
この挙動をMacで確認するため、スクロールバーが常に表示されるようにする。「システム環境設定」>「一般」>「スクロールバーの表示」から「常に表示」を選択する。
高さが表示領域を超えるよう.box1、.box2にそれぞれheight: 100vh;を指定したHTMLを用意する。
index.html抜粋
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
style.css
html, body {
margin: 0;
padding: 0;
}
.box1 {
height: 100vh;
width: 100vw;
background: #FADBDA;
}
.box2 {
height: 100vh;
width: 100vw;
background: #D9E9FA;
}
ブラウザで表示を確認すると、縦スクロールバーの横幅分、横にスクロールできるようになってしまった。
これの対処として、max-width: 100%を追加して画面幅を超えないようにできるが、それであれば最初からvwを使わずwidth: 100%とした方がわかりやすいように思う。
# 子要素を全画面表示して背景色を指定する
モーダルやドロワーナビの背景全体に半透明な背景色を重ねる(オーバーレイ)場合、親要素に影響を受けず画面全体に背景を表示したい。
そこで、position: fixed;を使い画面全体に背景を設定していく。html、bodyが親要素となるわけではないため、html、bodyにheight: 100%を指定しなくてよい。
<body>
こんにちは
<div class="full-page">
モーダル
</div>
</body>
# top: 0、left: 0、width: 100%、height: 100%で全画面に背景を表示する
.full-page {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.3);
}
top:0、left:0で画面の左上を基準にwidth:100%、height:100%で幅と高さを指定することで画面全体に背景を指定している。
# top:0、left:0、right:0、bottom:0で全画面に背景を表示する
top:0、left:0だけでなく、right:0、bottom:0も指定することで全画面に背景色を指定することができる。
.full-page {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.3);
}
・参考
https://stackoverflow.com/questions/28080910/what-does-top-0-left-0-bottom-0-right-0-mean/44488046 (opens new window)
https://hyper-text.org/archives/2014/08/position_absolute_center_layout.shtml (opens new window)
https://stackoverflow.com/questions/27612931/styling-html-and-body-selector-to-height-100-vs-using-100vh (opens new window)