基本的な話ですが、忘れがちなのでメモしておきます。
事前準備
HTML
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画面いっぱいに背景色</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="contents">
<h1>コンテンツ</h1>
<p>
コンテンツ
</p>
<p>
コンテンツ
</p>
<p>
コンテンツ
</p>
<p>
コンテンツ
</p>
<p>
コンテンツ
</p>
<p>
コンテンツ
</p>
<p>
コンテンツ
</p>
</div>
</body>
</html>
CSS
.contents{
background-color: rgb(206, 206, 206);
}
表示確認
準備完了です。では見ていきましょう。
画面全体に背景色をつける
シンプルに画面全体に背景色を付けたい場合はbodyに背景色を指定するだけです。
bodyタグ内に、文字や画像などの要素を記述することでブラウザ上に表示できますが、body自体に背景色を指定することで画面全体に色を付けることができます。
body{
background-color: gray;
}
.contents1{
background-color: rgb(206, 206, 206);
}
表示確認
特定の要素の背景色を画面いっぱいに表示させる
contentsクラスを画面いっぱいに表示させてみましょう。
①%を使って表示
contentsクラスのheightを100%にして、親要素の高さを基準とします。
そして、画面いっぱいにする為に親要素のhtml、bodyのheightも100%にします。
html,body{
height: 100%;
}
body{
background-color: gray;
}
.contents{
height: 100%;
background-color: rgb(206, 206, 206);
}
表示確認
デフォルトでmargin（余白）が設定されているので、*でリセットします。
*{
margin: 0;
padding: 0;
}
できました！
②vw,vhを使って表示
vwとvhはビューポート(画面表示領域)で要素の幅、高さを指定することができます。
つまり、100vw,100vhとは、画面サイズを基準として、縦横100%で要素を表示するという意味になります。
*{
margin: 0;
padding: 0;
}
body{
background-color: gray;
}
.contents{
width: 100vw;
height: 100vh;
background-color: rgb(255, 254, 199);
}
表示確認 こちらも問題なくできました！
参考