2つのシングルカラムを作成中、デスクトップ版とモバイル版で背景の大きさが変わってしまい直そうとしたらCSSが一部読み込まれなくなったのを直したい。

実現したいこと

発生している問題・分からないこと

Webデザインを学び始めたばかりのド初心者です。デスクトップ版とモバイル版で同じ背景を使って作成をしましたがモバイル版で確認すると画像の位置がズレてしまいました。それを直そうとCSSをいじっていたら作成していた2つのシングルカラムがどちらも一部でCSSを読み込まなくなってしまいました。原因は確実にCSSの書き方の問題だと思うのですがごちゃごちゃになってしまい何が何だか分からなくなってしまいました。HTLMとCSSをどこまでこのサイトに載せて良いのか分かっていないので不足があるかと思いますがご教授頂けますと幸いです。

該当のソースコード

HTML(シングルカラム1つ目)
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>WCBC Cafe</title>
6    <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
7    <meta name="viewport" content="width=device-width, initial-scale=1"
8
9<!-- ファビコン -->
10    <link rel="icon" type="image/png" href="images/WCBCafe/images/favicon.png">
11
12 <!--リセット CSS-->
13 <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
14
15 <!--Google フォント-->
16 <link rel="preconnect" href="https://fonts.googleapis.com">
17 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
18 <link href="https://fonts.googleapis.com/css2?family=Kiwi+Maru&family=M+PLUS+Rounded+1c&display=swap" rel="stylesheet">
19
20<!--オリジナルCSS-->
21<link rel="stylesheet" href="singlcoloum.css">
22
23</head>
24<body>
25    <div class="cover cover-home">
26        <header class="page-header wrapper">
27            <h1 class="align-center">
28                <a href="singlcoloum.html"><img class="logo" src="images/WCBCafe/images/logo.svg" alt="WCBカフェホーム"</a>
29            </h1>
30            <nav>
31                <ul class="main-nav font-english">
32                    <li><a href="images/WCBCafe/news.html">News</a></li>
33                    <li><a href="images/WCBCafe/menu.html">Menu</a></li>
34                    <li><a href="images/WCBCafe/contact.html">Contact</a></li>
35                </ul>
36            </nav>
37    </header>
38    <h2 class="page-title font-english">We'll Make Your Day</h2>
39    </div>
40
41    <section class="about">
42        <h3 class="heading-large font-english">about Cafe</h3>
43        <p>
44            Wcb Cafeは無添加の厳選素材とおしゃれな店内が魅力のカフェです。心と体に優しい、それでいて飽きのこない空間をご用意しております。
45            素材本来の美味しさを引き出したメニューを楽しみながら、癒しの時間をお過ごしください。
46        </p>
47        <div class="align-center">
48            <a class="btn" href="images/WCBCafe/menu.html">メニューを見る</a>
49        </div>
50    </section>
51    
52    <footer class="page-footer">
53        <h3 class="heading-large font-english">Information</h3>
54        <table class="info">
55            <tr>
56                <th>住所</th>
57                <td>東京都杉並区六本木0-0○◯○</td>
58            </tr>
59            <tr>
60                <th>電話</th>
61                <td>03-1111-xxxx</td>
62            </tr>
63            <tr>
64                <th>営業時間</th>
65                <td>10:00~22:00</td>
66            </tr>
67            <tr>
68                <th>店休日</th>
69                <td>水曜日</td>
70            </tr>
71        </table>
72        <div class="copyright">
73            <small>&copy; 2010 WCBCafe</small>
74        </div>
75    </footer>
76</body>
77</html>

HTML(シングルカラム2つ目)
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>WCBC Cafe-News</title>
6    <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
7    <meta name="viewport" content="width=device-width, initial-scale=1">
8
9<!-- ファビコン -->
10    <link rel="icon" type="image/png" href="images/WCBCafe/images/favicon.png">
11
12 <!--リセット CSS-->
13 <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
14
15 <!--Google フォント-->
16 <link rel="preconnect" href="https://fonts.googleapis.com">
17 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
18 <link href="https://fonts.googleapis.com/css2?family=Kiwi+Maru&family=M+PLUS+Rounded+1c&display=swap" rel="stylesheet">
19
20<!--オリジナルCSS-->
21<link rel="stylesheet" href="singlcoloum.css">
22
23</head>
24<body>
25    <div class="sub-cover cover-news"><!--クラス名変更-->
26        <header class="page-header wrapper">
27            <h1 class="align-center">
28                <a href="singlcoloum.html"><img class="logo" src="images/WCBCafe/images/logo.svg" alt="WCBカフェホーム"</a>
29            </h1>
30            <nav>
31                <ul class="main-nav font-english">
32                    <li><a href="images/WCBCafe/news.html">News</a></li>
33                    <li><a href="images/WCBCafe/menu.html">Menu</a></li>
34                    <li><a href="images/WCBCafe/contact.html">Contact</a></li>
35                </ul>
36            </nav>
37    </header>
38    <h2 class="page-title font-english">News</h2>
39    </div>
40    <footer class="page-footer">
41        <h3 class="heading-large font-english">Information</h3>
42        <table class="info">
43            <tr>
44                <th>住所</th>
45                <td>東京都杉並区六本木0-0○◯○</td>
46            </tr>
47            <tr>
48                <th>電話</th>
49                <td>03-1111-xxxx</td>
50            </tr>
51            <tr>
52                <th>営業時間</th>
53                <td>10:00~22:00</td>
54            </tr>
55            <tr>
56                <th>店休日</th>
57                <td>水曜日</td>
58            </tr>
59        </table>
60        <div class="copyright">
61            <small>&copy; 2010 WCBCafe</small>
62        </div>
63    </footer>
64</body>
65</html>

CSS
1@charset "UTF-8";
2/*共通部分
3--------*/
4html{
5    font-size: 100%;
6}
7body{
8    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic",sans-serif;
9    line-height: 1.7;
10    color: #432;
11}
12a{
13    text-decoration: none;
14}
15img{
16    max-width: 100%;
17}
18
19/*レイアウト
20---------*/
21.wrapper{
22    max-width: 1120px;
23    margin: auto;
24    padding: 0 1.5rem;
25}
26
27.align-center{
28    text-align: center;
29}
30
31/* 見出し */
32.font-english{
33    font-family: 'Philosopher', sans-serif;
34    font-weight: normal;
35}
36.page-title{
37    font-size: 3rem;
38    text-align: center;
39    margin-top: 2rem;
40    line-height: 1.4;
41}
42
43/*ヘッダー
44---------*/
45.page-header{
46    padding-top: .5rem;
47}
48.logo{
49    width: 210px;
50}
51.main-nav{
52    display: flex;
53    justify-content: center;
54    gap: 2.5rem;
55    font-size: 1.5rem;
56    list-style: none;
57}
58.main-nav a{
59    color: #432;
60}
61.main-nav a:hover{
62    color: #0db;
63}
64.cover{
65    background-size: cover;
66    background-position: center bottom;
67    height: 800px;
68.cover-home{
69    background-image: url(images/WCBCafe/images/cover-home-s.webp);
70}
71.about{
72    max-width: 736px;
73    padding: 0 1.5rem;
74    margin: 3rem auto 4rem;
75}
76.about p {
77    margin-bottom: 3rem;
78}
79.heading-large{
80    font-size: 3rem;
81    text-align: center;
82    margin-bottom: 1rem;
83}
84/* ボタン */
85.btn{
86    display: inline-block;
87    font-size: 1.5rem;
88    background-color: #0db;
89    color: #fff;
90    border-radius: 8px;
91    padding: 1rem 1.5rem;
92    transition: background-color 1s ease-out 200ms;
93}
94.btn:hover{
95    background-color: #0090aa;
96    translate: 10px -20px;
97}
98/* フッター */
99.page-footer{
100    background-image: url(images/WCBCafe/images/footer-s.webp);
101    background-size: cover;
102    background-position: center;
103    padding-top: 12rem;
104}
105.info{
106    width: 100%;
107    max-width: 544px;
108    margin: auto;
109    padding: 0 1.5rem;
110    border-spacing: 0;
111}
112.info th,
113.info td{
114    border-bottom: 1px solid #c9c2bc;
115}
116.info th{
117    text-align: left;
118    font-weight: normal;
119    padding: 1rem;
120}
121.info td{
122    padding: 1rem 0;
123}
124.copyright{
125    background-color: #432;
126    text-align: center;
127    padding: 2rem 0;
128    margin-top: 6rem;
129    color: #fff;
130}
131/* News */
132.sub-cover{
133    background-size: cover;
134    background-position: center bottom;
135    height: 528px;
136    margin-bottom: 4rem;
137}
138.cover-news{
139    background-image: url(images/WCBCafe/images/cover-news-s.webp);
140}
141/* デスクトップ版
142 ----------------- */
143 @media (min-width: 800px) {
144    /* 見出し */
145    .page-title{
146        font-size: 5rem;
147    }
148    .heading-large{
149        font-size: 4rem;
150    }
151
152 /* ヘッダー */
153 .page-header {
154    display: flex;
155    justify-content: space-between;
156    padding-top: 1.5rem;
157 }
158 .main-nav {
159    font-size: 2rem;
160}
161
162/* Home */
163.cover-home{
164    background-image: url(images/WCBCafe/images/cover-home-l.webp);
165}
166.about{
167    margin: 4rem auto 0;
168}
169/* フッター */
170.page-footer{
171    background-image: url(images/WCBCafe/images/footer-l.webp);
172    padding-top: 12rem;
173}
174.info th{
175    padding-left: 2.5rem;
176}

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

お恥ずかしながらなぜこの様になってしまったのか理解ができておりません。

補足

特になし

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

回答1件

ベストアンサー

.cover {や@media (min-width: 800px) {が閉じてないです。

投稿2024/07/04 07:11

Lhankor_Mhy

総合スコア36791

Lhankor_Mhy

2024/07/04 07:14

余計なアドバイスかと思いますが、面倒でもインデントをしっかり付けた方がこういったミスは減ります。VSCodeなどのコードエディタを使うと、オートインデントが働くので検討してみるといいかと思います。

Riz

2024/07/04 09:06

ご教授頂き誠にありがとうございます。ご指摘頂いた箇所を修正したところ、正常に背景を映し出すことが出来ました。アドバイスも添えて頂き大変嬉しく思います...!現在、VSCodeで勉強を進めているのですが、オートインデントとはファイル名の横に表示される数字のことでお間違いないでしょうか...?たまに「このファイルに○個の問題」と表記されるのですが何の事なのか理解出来ていませんでした。もし宜しければご教授頂けますと幸いです。

Lhankor_Mhy

2024/07/04 09:22

お役に立てたようで何よりです。オートインデントは、自動的にインデントを入れてくれる機能です。CSSですと、} を入れ忘れると、そのブロックが終わってないと解釈されて、自動的に行頭にスペースが2または4個挿入されるはずです。ですので、{}の対応が合わない場合などに気づきやすい、ということです。ファイルの横にある数字は、たいていの場合文法エラーの警告なので、そちらを参照することによっても凡ミスを防ぐことはできると思います。

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