先ほど確認したところ、headerの部分の背景色がちゃんと表示していますが、
多分以下の原因かと思いますが、参考になれば嬉しいです。
-
<link rel="stylesheet" href=".css">のところ、CSSのファイルのパスとファイル名を記述する - もしブラウザでプレビューしている場合、キャッシュの関係でCSSが反映されない時もあります。この場合はキャッシュを消去してください(ハード再読み込み)。
ちなみに、スペルミス(min-heigth)がありました。
Like!
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
1Answer
0
Comments
@bigD
Questionerご返信いただきありがとうございます。
cssの所はファイル名に個人情報が入っていたので、
投稿する際に、削除させていただきました。
紛らわしくて申し訳ないです。
表示されているんですね、自分の画面だとなぜか表示されません。
スペルミスまで指摘していただいてありがとうございます。
もう少し試してみようかと思います。