CSSに書き込んだ背景画像が反映しない

前提・実現したいこと

CSSに書き込んだ背景画像が反映しないため、そこを改善したいです。

現在「HTML＆CSSとWebデザイン　入門講座」という本を基に模写を行っています。そこで、今まで反映していたCSSが全く反映されなくなったとう事象が起こっています。
ちなみに、以下の部分が反映されません。それ以外の部分は反映されています。

CSS
1 #menu {
2      background-image: url(../images/menu-bg.jpg);
3      min-height: 100vh;
4  }
5  .menu-content {
6      max-width: 560px;
7      margin-top: 10%;
8  }
9  .menu-content .page-title {
10      text-align: center;
11  }

発生している問題・エラーメッセージ

エラーメッセージというよりも、背景画像が出てきません。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <title>WCB Cafe - MENU</title>
6    <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
7
8      <link rel="icon" type="image/png" href="images/favicon.png">
9
10    <!-- CSS -->
11           <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
12           <link href="https://fonts.googleapis.com/css？family=Philosopher"rel ="stylesheet">
13           <link href="css/style.css"rel="stylesheet">
14
15  </head>
16
17  <body>
18    <div id="menu" class="big-bg">
19      <header class="page-header wrapper">
20       <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WEBカフェホーム"></a></h1>
21
22       <nav>
23         <ul class="main-nav">
24           <li><a href="news.html">News</a></li>
25           <li><a href="menu.html">Menu</a></li>
26           <li><a href="contact.html">contact</a></li>
27         </ul>
28       </nav>
29       
30     </header>
31    </div>
32
33    <div class="menu-contents wrapper">
34      <h2 class="page-title">Menu</h2>
35      <p>
36        体に優しい自然食を提供する、WEB　CAFE。無添加の食材を利用したメニューが特徴です。
37        おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒やされください。
38      </p>
39    </div><!-- /.menu-content -->
40
41    <footer>
42      <div class="wrapper">
43        <p><small>&copy;2019 Manabox</small></p>
44      </div>
45    </footer>
46  </body>
47</html>
48

CSS
1@charset "UTF-8";
2
3/*　共通部分
4------------------------*/
5html{
6  font-size:100%;
7}
8
9body{
10  font-family:"Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体","ヒラギノ角ゴ Pro W3",sans-serif;
11  line-height:1.7;
12  color:#432;
13
14}
15
16a{
17  text-decoration:none;
18
19}
20
21img{
22  max-width:100%;
23
24}
25
26/*　HEADER
27------------------------*/
28.logo{
29  width:210px;
30  margin-top:14px;
31}
32
33.main-nav{
34  display:flex;
35  font-size:1.25rem;
36  text-transform:uppercase;
37  margin-top:30px;
38  list-style:none;
39}
40
41.main-nav li{
42  margin-left:36px;
43}
44
45.main-nav a{
46  color:#432;
47}
48
49.main-nav a:hover{
50  color:#0bd;
51}
52
53.page-header{
54  display:flex;
55  justify-content:space-between;
56}
57
58.wrapper{
59  max-width:1100px;
60  margin:0auto;
61  padding:0 4%;
62}
63
64
65/*　HOME
66------------------------*/
67
68.home-contact{
69  text-align:center;
70  margin-top:10%;
71}
72
73.home-contact p{
74  font-size:1.125rem;
75  margin:10px 0 42px;
76}
77
78/* 見出し */
79.page-title{
80  font-size:5rem;
81  font-family:'Philosopher',serif;
82  text-transform:uppercase;
83  font-weight:normal;
84}
85
86/* ボタン */
87.button{
88  font-size:1.375rem;
89  background:#0bd;
90  color:#fff;
91  border-radius:5px;
92  padding:18px 32px;
93}
94
95.button:hover{
96  background:#0090aa;
97}
98
99/* 大きな背景画像 */
100.big-bg{
101  background-size:cover;
102  background-position:center top;
103  background-reprat:no-repeat;
104}
105
106#home{
107  background-image:url(../images/main-bg.jpg);
108  min-height:100vh;
109}
110
111#home. page-title {
112  text-transform:none;
113}
114
115
116/*　NEWS
117------------------------*/
118
119#news {
120    background-image: url(../images/news-bg.jpg);
121    height: 270px;
122    margin-bottom: 40px;
123}
124
125#news .page-title {
126    text-align: center;
127}
128
129/*　フッター
130------------------------*/
131
132footer{
133  background:#432;
134  text-align:center;
135  padding:26px;
136}
137
138footer p{
139  color:#fff;
140  font-size:0.875rem
141}
142
143/* 記事部分 */
144article{
145  width:74%;
146  order: 2;
147}
148
149/* サイドバー */
150aside{
151  width:22%;
152  order: 3;
153}
154
155.ad{
156  order: 1;
157}
158
159.news-contents{
160  display:flex;
161  justify-content:space-between;
162  margin-bottom:50px;
163}
164
165/* 記事部分　ヘッダー */
166.post-info{
167  position:relative;
168  padding-top:4px;
169  margin-bottom:40px;
170}
171
172.post-date{
173  background:#0bd;
174  border-radius:50%;
175  color:#fff;
176  width:100px;
177  height:100px;
178  font-size:1.625rem;
179  text-align:center;
180  position:absolute;
181  top:0;
182  padding-top:10px;
183}
184
185.post-date span{
186  font-size:1rem;
187  border-top:1px rgba(255,255,255,.5) solid;
188  padding-top:6px;
189  display:block;
190  width:60%;
191  margin:0 auto;
192}
193
194.post-title{
195  font-family:"Yu Mincho","YuMincho",serif;
196  font-size:2rem;
197  font-weight:normal;
198}
199
200.post-title,
201.post-cat{
202  margin-left:120px;
203}
204
205article img{
206  margin-bottom:20px;
207}
208
209article p{
210  margin-bottom:1rem;
211}
212
213/* サイドバー */
214
215.sub-title{
216  font-size:1.375rem;
217  padding:0 8px 8px;
218  border-bottom:2px #0bd solid;
219  font-weight:normal;
220}
221
222aside p{
223  padding:12px 10px;
224}
225
226.sub-menu{
227  margin-bottom:60px;
228  list-style:none;
229}
230
231.sub-menu li{
232  border-bottom:1px #ddd solid;
233}
234
235.sub-menu a{
236  color:#432;
237  padding:10px;
238  display:block;
239}
240
241.sub-menu:hover{
242  color:#0bd;
243}
244
245/* モバイル版 */
246
247@media (max-width:600px){
248  .page-title{
249    font-size:2.5rem;
250  }
251
252  /* HEADER */
253  .main-nav{
254    font-size:1rem;
255    margin-top:10px;
256  }
257  .main-nav{
258    margin:0 20px;
259  }
260
261  /* HOME */
262  .home-content{
263    margin-top:20%;
264  }
265
266  .page-header{
267    flex-direction:column;
268    align-items:center;
269  }
270
271  .news-contents{
272    flex-direction:column;
273  }
274
275  article,
276  aside{
277    width:100%;
278  }
279
280  #news .pege-title{
281    margin-top:30px;
282    }
283
284    aside{
285      margin-top:60px;
286    }
287
288    .post-info{
289      margin-bottom:30px;
290    }
291
292    .post-date{
293      width:70px;
294      height:70px;
295      font-size:1rem;
296    }
297
298    .post-date span{
299      font-size:0.875rem;
300      padding-top:2px;
301    }
302
303    .post-title{
304      font-size:1.375rem;
305    }
306
307    .post-cat{
308      font-size:0.875rem;
309      margin-top:10px;
310    }
311
312    .post-title,
313    .post-cat{
314      margin-left:80px;
315    }
316
317    /* MENU */
318
319
320  #menu {
321      background-image: url(../images/menu-bg.jpg);
322      min-height: 100vh;
323  }
324  .menu-content {
325      max-width: 560px;
326      margin-top: 10%;
327  }
328  .menu-content .page-title {
329      text-align: center;
330  }
331
332
333}
334

試したこと

１.正しいコード（本についている模範解答のようなもの）をコピーし打ち込んでも反映しません。

２.スーパーリロードも試しました。

補足情報（FW/ツールのバージョンなど）

Atom、Google Chrome

dit.

2021/07/28 23:49

今回の問題と直接関係があるかわからないのでこちらにコメントしますが、 <link href="https://fonts.googleapis.com/css？family=Philosopher"rel ="stylesheet"> の「？」が全角になっているようなので半角に直しておいた方が良いかと思います。

Tor_15

2021/07/29 15:31

ご指摘ありがとうございます。修正させていただきました。ただ、依然としてCSSは反映されない状態です…。

行動規範の内容に同意します

回答3件

ご提示のコードにはビューポート設定がないようです。

【ダウンロード】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 | SBクリエイティブ
↑のサンプルデータをダウンロードしてみて確認してみましたが、サンプルにはビューポート設定がありました。

html
1<meta name="viewport" content="width=device-width, initial-scale=1">

せっかく正解のサンプルデータがあるのですから、行き詰った時は正解と比べてみた方がいいのではないか、と思いました。老婆心ながら。

投稿2021/07/29 01:17

Lhankor_Mhy

総合スコア36981

Tor_15

2021/07/29 15:34

ご指摘ありがとうございます。本当ですね…ビューポート設定が抜けていたのは気が付きませんでした。早速帰って設定してみたのですが、やはりCSSは反映しないようです…。正しいコードをコピーし貼り付けたのですが、それでも一向に反映しない(背景画像だけではなくフォントサイズなど全てのCSSが効かない状態です)のでコード以外の原因が無いかもう一度見てみます。

Lhankor_Mhy

2021/07/30 00:46

当方では、ご提示のコードにビューポート設定を追加したところ、問題なくスタイルが反映されています。なお、 <div class="menu-contents wrapper"> は、サンプルでは、 <div class="menu-content wrapper"> となっていました。

Tor_15

2021/07/31 14:13

お返事遅くなり申し訳ございません。スペルミス…気が付きませんでした、ご指摘ありがとうございます。 Lhankor_Mhy様の方で問題なく反映されているということは、何らかの原因により「menu」のページにのみCSSが反映していない可能性が高いのではないかと、自分自身考えております。該当のテキストは「index」「news」「menu」「contact」の4つを作成していくのですが、前半2つはテキスト通りのレイアウトになっています。もう少し自分で原因を探ってみます。

行動規範の内容に同意します

ベストアンサー

画像を外部ファイルに置き換えて試したところ、提示されたHTML/CSSで画像は反映されました。
動くサンプル：https://jsfiddle.net/wrvtkqof/

なのでCSSが読み込まれていれば、フッターの背景色など指定したものが反映されると思います。
HTMLファイルと同階層に「css」フォルダがあり、その中に「style.css」というファイルがあるかを確認しましょう。（デベロッパーツールで404エラーが出ていないか確認しましょう）

「CSSが適用されない」確認リスト。
0. 当該要素がない
0. HTMLの構文が間違っている（当該箇所だけでなくページ全体を確認）
0. CSSのセレクタが適切でない（当該要素を指定できていない） ※1
0. CSSのほかの指定（or他のCSSファイル）で上書きされている ※1
0. CSS内で指定しているURLが違う（相対パスがCSSファイルの有る場所からになっていない）
0. HTML/CSSが保存されていない、サーバへのアップロードに失敗している
0. 外部リンクの指定を間違っている（<link rel="stylesheet" href="/path/style.css">の綴りやパス、ファイル名が間違っている）
0. 外部リンクしているファイルが無い
0. ブラウザに表示している物と別のファイルを編集している（案外よく有る）
0. キャッシュされている（ブラウザ、サーバなど） ※2

※1
【初心者向け！Chromeの検証機能（デベロッパーツール）の使い方】
https://saruwakakun.com/html-css/basic/chrome-dev-tool

※2
【Webブラウザのキャッシュ削除と、スーパーリロード方法一覧 | uzurea.net】
http://uzurea.net/cacheclear-and-superreload-2018/

投稿2021/07/29 16:21

kei344

総合スコア69608

Tor_15

2021/07/31 14:06

お返事が遅くなり申し訳ございません。様々なアドバイスありがとうございます、動くサンプルまで添付していただき恐縮です。はい、HTMLファイルと同階層に「css」フォルダがあり、その中に「style.css」というファイルがきちんと存在します。現在は「menu画面」を作成していますが、それより前に作った「news画面」などはちゃんとCSSが反映されている状態です。 kei344様が教えてくださったデベロッパーツールにて背景色を指定したところ正常に反映されたので、原因はCSSが反省されていないことにあるのではないかと考えていますが…なぜこの「menu画面」だけCSSが反映されないのか分からない状態です。

kei344

2021/07/31 14:10

> デベロッパーツールで404エラーが出ていないか確認しましょうまずこれを確認しましょう。 https://eng-entrance.com/javascript-display-error https://www.sakurasaku-labo.jp/blogs/developer-tools#%E3%83%9A%E3%83%BC%E3%82%B8%E4%B8%8A%E3%81%AE%E3%82%A8%E3%83%A9%E3%83%BC%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF

Tor_15

2021/07/31 14:25

すみません、先程伝えするつもりが漏れていました。はい、現在404エラーは出ていない状況です。デベロッパーツールで確認してみると、そもそも該当部分（menu画面全体）にCSSが反映されていない状態のようです。

kei344

2021/07/31 14:28

「@media (max-width:600px)」の中にしか「#menu」の指定がありませんが、（viewportを設定した上で）その幅で確認していますか？

Tor_15

2021/07/31 16:34

大変初歩的なミスで申し訳ございません、kei344様の仰る通り「@media」の中に「#menu」の指定があったのが原因でした。そこは改善させていただいた所、きちんと背景画像が表示されました！お手数をお掛けしてすみません…「@media」以降に記載したものは、全てそこだけに掛かるのですね。もっとしっかり学びます。本当にありがとうございました。

行動規範の内容に同意します

背景画像が出ないということなので以下のURLが参考になるかもしれません。

background-imageが表示されない原因【見るべきポイント】

投稿2021/07/28 16:58