css メニューの背景色が適用されない

前提・実現したいこと

メニューに背景色をつけたい

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

スマホ表示時のメニューの背景色がbody部分の背景に隠れてしまう

該当のソースコード

html5
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewpoint" content="width=device-width,initial-scale=1">
6  <title>CONTACT|ASTRAL</title>
7  <link href="https://fonts.googleapis.com/css?family=Montserrat+Subrayada" rel="stylesheet">
8  <link href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c" rel="stylesheet">
9  <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:300" rel="stylesheet">
10  <link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
11  <link href="https://fonts.googleapis.com/css?family=Oswald:700" rel="stylesheet">
12  <link href="css/style.css"rel="stylesheet"></head>
13<body id="contact">
14  
15<!--header始まり-->
16  <header>
17   <div class="logo">
18      <a href="astral top.html">ASTRAL</a></div>
19    <nav>
20     <ul class="global-nav">
21      <li><a href="about2.html">ABOUT</a></li>
22      <li><a href="works.html">WORKS</a></li>
23      <li><a href="contact2.html">CONTACT</a></li>
24      </ul>
25    </nav>
26    <div class="menu">
27     <label for="menu_bar">MENU</label>
28     <input type="checkbox" id="menu_bar" class="MENU" />
29      <ul id="link">
30       <li><a href="astral%20top.html">TOP PAGE</a></li>
31       <li><a href="about2.html">ABOUT</a></li>
32       <li><a href="works.html">WORKS</a></li>
33       <li><a href="contact2.html">CONTACT</a></li>
34       </ul>
35    </div>
36  </header>
37  <!-- header終わり -->
38  
39  <!-- wrap始まり -->
40  <div id="wrap">
41    <div class="content">
42     <div class="main-center">
43       <h1>CONTACT</h1>
44       <p>ASTRALへのアクセス方法、お問い合わせ、撮影のご依頼フォームのページです。お気軽にお問い合わせください。</p>
45       <section class="access clearfix">
46       <h2 class="icon">ACCESS</h2>
47      <table>
48         <tr>
49          <th>所在地住所</th>
50          <td>〒000-0000<br>〇〇県〇〇市</td>
51         </tr>
52         <tr>
53          <th>電話番号</th>
54          <td>000-0000-0000</td>
55         </tr>
56         <tr>
57          <th>電車でのアクセス</th>
58          <td>〇〇駅から徒歩5分</td>
59         </tr>
60         <tr>
61          <th>お車でのアクセス</th>
62          <td>〇〇I.Cから国道〇〇号線を経由して10分</td>
63         </tr>
64       </table>
65        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.828030380883!2d139.76493611535642!3d35.681236180194226!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1613309800065!5m2!1sja!2sjp" width="460" height="220" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
66      </section>
67      <section>
68      <h2 class="icon">CONTACT FORM</h2>
69      <div class="form">
70        <form>
71         <dl>
72          <dt><span class="required">お名前</span></dt>
73          <dd><input type="text" name="name" class="name" required></dd>
74          <dt><span class="required">メールアドレス</span></dt>
75          <dd><input type="email" name="email" class="email" required></dd>    
76          <dt>お電話番号</dt>
77          <dd><input type="tel" name="tel" class="tel"></dd> 
78          <dt>お問い合わせ種別</dt>
79          <dd>
80            <select name="type" class="type">
81              <option value="撮影のご依頼">撮影のご依頼</option>
82              <option value="講演・各種メディア出演のご依頼">講演・各種メディア出演のご依頼</option>
83              <option value="その他お問い合わせ">その他お問い合わせ</option>
84            </select>
85          <dt>ご希望のご連絡方法</dt>
86          <dd>
87            <input type="radio" name="contact" value="Eメール">Eメール
88            <input type="radio" name="contact" value="お電話">お電話
89          </dd>
90          <dt>メッセージ</dt>
91          <dd><textarea name="massage" class="massage"></textarea></dd>
92         </dl>
93         <button type="submit" class="btn">送信</button>
94         <div class="attention">
95          <p>※「<span class="required"></span>」の付いている項目は必須事項です。<br>※メッセージ送信後、48時間以内に担当者よりご連絡いたします。</p>
96         </div>
97        </form>
98        </div>
99      </section>
100      </div></div>
101  </div>
102  <!-- wrap終わり -->
103  
104  <!-- footer始まり -->
105  <footer>
106   <small>(c) 2021 ASTRAL</small>
107  </footer>
108  <!-- footer終わり -->
109  
110</body>
111</html>

css3
1@charset "utf-8";
2  
3  body {
4    margin: 0;
5    padding: 0;
6    font-size: 20px;
7    line-height: 2;
8}
9
10p,h1,h2,h3,h4,h5,h6 {
11  margin-top: 0;
12}
13
14img {
15  vertical-align: 0;
16}
17
18ul {
19  margin: 0;
20  padding: 0;
21}
22
23a {
24  color: #3583aa;
25  text-decoration: none;
26}
27
28a:visited {
29  color: #788d98;
30}
31
32a:hover {
33  text-decoration: underline;
34}
35
36 header {
37  width: auto;
38  height: 150px;
39  margin: 0 auto;
40}
41 .logo{
42  float: left;
43   margin-top: 30px;
44   font-size: 40px;
45   font-family: 'Montserrat Subrayada', sans-serif;
46}
47
48.logo a {
49  color: #000000;
50}
51
52.logo a:hover {
53  text-decoration: none;
54}
55
56.global-nav {
57  float: right;
58  margin-top: 30px;
59}
60
61.global-nav li {
62  float: left;
63  margin: 0 30px;
64  font-size: 30px;
65  list-style: none;
66}
67
68.global-nav li a {
69  color: #cccccc;
70  font-family: 'Anton', sans-serif;
71}
72
73.global-nav li a:hover {
74  border-bottom: 2px solid #cccccc;
75  padding-bottom: 3px;
76  text-decoration: none;
77}
78
79
80
81#about2, #works, #contact, #photo, #video2  {
82  background-image: url(../images/abstract.png);
83  background-repeat: no-repeat;
84  background-position: center top;
85  background-attachment: fixed;
86  background-size: 100% auto;
87}
88
89#wrap {
90  clear: both;
91  background-color: #ffffff;
92  margin-top: 170px;
93  padding: 35px 0;
94}
95
96.menu {
97    width: 100%;
98}
99.menu a {
100    display: block;
101    padding: 15px;
102    text-decoration: none;
103    color: #000;
104    text-align: center;
105}
106
107label {
108    display: block;
109    margin: 40px 0 0 0;
110    padding: 20px 0 0 0;
111    line-height: 1;
112    height: 50px;
113    font-size: 30px;
114  text-align: center;
115    color :#fff;
116  background-color: #c0c0c0;
117    cursor :pointer;
118}
119
120input {
121    display: none;
122}
123
124.menu ul {
125    margin: 0;
126    padding: 0;
127    background :#00ffff;
128    list-style: none;
129}
130
131.menu li {
132    height: 0;
133    overflow: hidden;
134    -webkit-transition: all 0.5s;
135    -moz-transition: all 0.5s;
136    -ms-transition: all 0.5s;
137    -o-transition: all 0.5s;
138    transition: all 0.5s;
139}
140
141#menu_bar:checked ~ #link li {
142    height: 54px;
143    opacity: 1;
144}
145
146.main-center {
147  width: auto;
148  margin: 0 auto;
149}
150
151h1 {
152  font-family: 'Oswald', sans-serif;
153  font-size: 40px;
154  border-bottom: 1px solid #cccccc;
155}
156
157h2 {
158  font-family: 'Oswald', sans-serif;
159  font-size: 30px;
160}
161
162.icon:before {
163  content: "";
164  padding-right: 10px;
165  border-left: 7px solid #87ceed;
166}
167
168.plofile-txt {
169  width: 600px;
170  float: left;
171}
172
173#about2 .profile-image {
174  width: 550px;
175  height: 350px;
176  float: right;
177  padding-right: 90px;
178}
179
180.clearfix:after {
181  content: "";
182  display: block;
183  clear: both;
184}
185
186section {
187  margin-bottom: 35px;
188}
189
190#about2 .career th {
191  width: 220px;
192  background-color: #f0f0f0;
193  padding: 10px 0;
194  border: 1px solid #cccccc;
195}
196
197#about2 .career td {
198  width: 700px;
199  padding: 10px 0 10px 30px;
200  border: 1px solid #cccccc;
201}
202
203#about2 .career tr {
204  font-family: "M PLUS Rounded 1c";
205}
206
207table {
208  border-spacing: 0;
209  border-collapse: collapse;
210}
211
212footer {
213  text-align: center;
214  color: #ffffff;
215  padding: 15px 0;
216  background-color: #a9a9a9;
217}
218
219#index #wrap{
220  background-color: transparent;
221  margin-top: 0;
222  padding: 0;
223}
224
225.main {
226  width: 800px;
227  margin: 0 30px;
228  float: left;
229}
230
231.sidebar {
232  width: 220px;
233  margin: 0 10px 0 30px;
234  float: right;
235  font-family: "M PLUS Rounded 1c";
236}
237
238.sidebar h2 {
239  margin-bottom: 5px;
240}
241
242.sidebar ul {
243  font-size: 22px;
244  margin-left: 20px;
245}
246
247.sidebar ul a {
248  color: #333333;
249}
250
251a img:hover {
252  opacity: 0.8;
253}
254
255#photo .photograph-list li {
256  float: left;
257  list-style: none;
258  margin: 0 20px 15px 0;
259}
260
261#contact .access table {
262  float: left;
263}
264
265#contact .access th,
266#contact .access td {
267  text-align: left;
268  vertical-align: top;
269  line-height: 2.5;
270}
271
272#contact .access td {
273  padding-left: 30px;
274}
275
276#contact .access iframe {
277  width: 500px;
278  float: right;
279  margin-right: 150px;
280}
281
282#contact .form {
283  background-color: #eaeaea;
284  padding: 30px 50px;
285}
286
287#contact .form dl dt {
288  width: 165px;
289  padding: 10px 0;
290  float: left;
291  clear: both;
292}
293
294#contact .form dl dd {
295  padding: 10px 0;
296}
297
298#contact .form .name {
299  width: 240px;
300  height: 30px;
301}
302
303#contact .form .email {
304  width: 300px;
305  height: 30px;
306}
307
308#contact .form .tel {
309  width: 240px;
310  height: 30px;
311}
312
313#contact .form .type {
314  width: 180px;
315  height: 30px;
316}
317
318#contact .form .message {
319  width: 660px;
320  height: 150px;
321}
322
323#contact .form button {
324  background-color: #009cd3;
325  color: #ffffff;
326  font-size: 20px;
327  width: 120px;
328  display: block;
329  text-align: center;
330  line-height: 50px;
331  border-radius: 5px;
332  border: 3px solid #009cd3;
333  margin-left: 165px;
334}
335
336#contact .form button:hover {
337  background-color: #ffffff;
338  color: #009cd3;
339  cursor: pointer;
340}
341
342#contact .form .required:after {
343  content: " * ";
344  color: #ff0000;
345}
346
347#contact .form .attention {
348  margin: 20px 0 0 165px;
349}
350
351@media screen and (max-width:1024px) {
352  .logo {
353    text-align: center;
354    clear: both;
355    float: none;
356    font-size: 100px;
357    width: 100%;
358    margin; 0;
359  }
360  .global-nav {
361    display: none;
362  }
363}
364
365@media screen and (min-width:1024px) {
366  .menu {
367    display: none;
368  }
369}

試したこと

初心者でどうすればいいか分からなかったです。

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

特になし

m.ts10806

2021/02/14 19:14

>初心者でどうすればいいか分からなかったです。ここまでのコードを組んでおいて「どうすればいいか分からない」というのが分からないのですけど、もう少しミニマムな構成で組みなおしてみると見えてくることもあるのでは。

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

回答1件

ベストアンサー

.menu ul の水色の背景色のことですか。
もし、そうなら、下記のようにz-index で前面に移動させればいいでしょう。

css
1.menu ul {
2    margin: 0;
3    padding: 0;
4    background :#00ffff;
5    list-style: none;
6    position: relative; /* 追加 */
7    z-index: 1;        /* 追加 */
8}