gridレイアウトで設定したヘッダーの背景色の変え方
gridを用いてページレイアウトを作成しているのですが、headerの部分の背景色が反映されずに戸惑っております。助言いただければ幸いです。
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href=".css">
</head>
<body>
<header>header</header>
<nav>
<img src=".jpg">
</nav>
<aside>right</aside>
<main>content</main>
</body>
</html>
css
body {
font-size: 2rem;
width: 100%;
margin: 0 auto;
min-heigth: 100vh;
display: grid;
grid-template:
"... ..... ..... ..... ..... ..... ..." 10px
"... header header header header header ..." 130px
"... ..... ..... ..... ..... ..... ..." 15px
"... left ..... right right right ..." 240px
"... ..... ..... ..... ..... ..... ..." 40px
"... content content content content content ..." 360px
"... ..... ..... ..... ..... ..... ..." 0px
/ 10px 240px 10px 1fr 10px 150px 10px
}
header {
grid-area: header;
background-color: red; ↩ ＊このヘッダーの部分の背景色が反映されません＊
どうすれば良いでしょうか。
}
img {
width: 240px;
height: 240px;
}
nav {
grid-area: left;
}
aside {
grid-area: right;
}
main {
grid-area: content;
}
@media screen and (max-width: 1000px) {
body {
grid-template:
"header" 130px
"left"
"right"
"content" 360px;
}
}
0
