質問編集履歴

1

書式修正、追加情報

2019/08/21 04:42

投稿

Shu1006
Shu1006

スコア3

test CHANGED
File without changes
test CHANGED
@@ -18,7 +18,15 @@
18
18
 
19
19
  ハンバーガーメニュー(三となっている部分をクリックすると展開するナビゲーション)を実装したいのですが、中身にあたるナビ部分が隠れずに露出してしまいます。
20
20
 
21
+ Google Chromeのデベロッパーツールで確認するとスタイル(nav.menu)の部分に打ち消し線が入ってしまったり、
22
+
21
- Google Chromeのデベロッパーツールで確認するとスタイルの部分に打ち消し線が入ってしまったり、倀という文字がスタイルの指定部に入ってしまう(fontsize: 10pxが倀fontsize: 10pxとなる)といった不具合が起こりメニューを実装できていません。メニュー部分以外はCSSが反映されているため、ファイルの指定が誤っているということはないかと思われます。
23
+ 倀という文字がスタイルの指定部に入ってしまう(fontsize: 10pxが倀fontsize: 10pxとなる)といった不具合が起こりメニューを実装できていません。
24
+
25
+ メニュー部分以外はCSSが反映されているため、ファイルの指定が誤っているということはないかと思われます。
26
+
27
+ またメニュー(span)の挙動に関しては問題はないので、nav.menuのスタイルを反映させられれば、解決します。
28
+
29
+
22
30
 
23
31
  ```
24
32
 
@@ -34,10 +42,6 @@
34
42
 
35
43
  ```<div class="container">
36
44
 
37
- <img src="image/headerlogo.png" alt="headerLogo" class="logo" id="headerLogo" link rel="#top">
38
-
39
- <!-- ナビメニュー部分 -->
40
-
41
45
  <nav class="menu">
42
46
 
43
47
   <ul>
@@ -56,7 +60,7 @@
56
60
 
57
61
  </nav>
58
62
 
59
- <!-- ハンバーガーメニュー部分 -->
63
+
60
64
 
61
65
  <div class="Toggle">
62
66
 
@@ -74,39 +78,7 @@
74
78
 
75
79
  CSS
76
80
 
77
- ```header{
81
+ ```
78
-
79
- margin:0px;
80
-
81
- padding:0px;
82
-
83
- top:0px;
84
-
85
- left:0px;
86
-
87
- width:100%;
88
-
89
- height:50px;
90
-
91
- text-align:;
92
-
93
- /* position: fixed; */
94
-
95
- flex-direction: row;
96
-
97
- flex-wrap: nowrap;
98
-
99
- justify-content:flex-start;
100
-
101
- display:inline;
102
-
103
- }
104
-
105
- #headerLogo{
106
-
107
- height: 130px;
108
-
109
- }
110
82
 
111
83
  .container{
112
84
 
@@ -122,37 +94,35 @@
122
94
 
123
95
  /* ハンバーガーメニュー */
124
96
 
125
- /*ナビメニューのスタイルを指定*/
126
-
127
97
  .menu{
128
98
 
129
-  /* position: fixed; /*表示位置を固定*/ */
99
+  position: fixed;
130
-
100
+
131
-  z-index: 2; /*重ね順を変更*/
101
+  z-index: 2;
132
-
102
+
133
-  top: 0; /*表示位置を指定*/
103
+  top: 0;
134
-
104
+
135
-  left: 0; /*表示位置を指定*/
105
+  left: 0;
136
-
106
+
137
-  background: #fff;/*背景を白にする*/
107
+  background: #fff;
138
-
108
+
139
-  color: #000; /*文字色を黒にする*/
109
+  color: #000;
140
-
110
+
141
-  text-align: center; /*テキストを中央揃え*/
111
+  text-align: center;
142
-
112
+
143
-  width: 100%; /*全幅表示*/
113
+  width: 100%;
144
-
114
+
145
-  transform: translateY(-100%); /*ナビを上に隠す*/
115
+  transform: translateY(-100%);
146
-
116
+
147
-  transition: all 0.6s; /*アニメーションの時間を指定*/
117
+  transition: all 0.6s;
148
-
118
+
149
- }
119
+ }/*この部分のスタイルが反映されず打ち消し線が入っていました。*/
150
120
 
151
121
 
152
122
 
153
123
  .menu ul{
154
124
 
155
-  background: #ccc; /*背景をグレーにする*/
125
+  background: #ccc;
156
126
 
157
127
   width: 100%;
158
128
 
@@ -162,8 +132,6 @@
162
132
 
163
133
  }
164
134
 
165
-
166
-
167
135
  .menu ul li{
168
136
 
169
137
   font-size: 1.1em;
@@ -178,21 +146,17 @@
178
146
 
179
147
  }
180
148
 
181
-
182
-
183
149
  .menu ul li:last-child{
184
150
 
185
151
   padding-bottom: 0;
186
152
 
187
-  border-bottom: none; /*最後のメニュー項目のみ下線を消す*/
153
+  border-bottom: none;
188
-
154
+
189
- }
155
+ }
190
-
191
-
192
156
 
193
157
  .menu ul li a{
194
158
 
195
-  display: block; /*クリックできる領域を広げる*/
159
+  display: block;
196
160
 
197
161
   color: #000;
198
162
 
@@ -200,21 +164,19 @@
200
164
 
201
165
  }
202
166
 
203
- /*トグルボタンが押されたときに付与するクラス*/
204
-
205
167
  .menu.active{
206
168
 
207
169
   transform: translateY(0%);
208
170
 
209
171
  }
210
172
 
211
- /*トグルボタンのスタイルを指定*/
173
+
212
174
 
213
175
  .Toggle {
214
176
 
215
177
  display: block;
216
178
 
217
- position: fixed; /* bodyに対しての絶対位置指定 */
179
+ position: fixed;
218
180
 
219
181
  right: 13px;
220
182
 
@@ -242,11 +204,11 @@
242
204
 
243
205
  border-bottom: solid 3px #000;
244
206
 
245
- -webkit-transition: .35s ease-in-out; /*変化の速度を指定*/
207
+ -webkit-transition: .35s ease-in-out;
246
-
208
+
247
- -moz-transition: .35s ease-in-out; /*変化の速度を指定*/
209
+ -moz-transition: .35s ease-in-out;
248
-
210
+
249
- transition: .35s ease-in-out; /*変化の速度を指定*/
211
+ transition: .35s ease-in-out;
250
212
 
251
213
  left: 6px;
252
214
 
@@ -260,16 +222,12 @@
260
222
 
261
223
  }
262
224
 
263
-
264
-
265
225
  .Toggle span:nth-child(2) {
266
226
 
267
227
  top: 18px;
268
228
 
269
229
  }
270
230
 
271
-
272
-
273
231
  .Toggle span:nth-child(3) {
274
232
 
275
233
  top: 27px;
@@ -278,8 +236,6 @@
278
236
 
279
237
 
280
238
 
281
- /* 最初のspanをマイナス45度に */
282
-
283
239
  .Toggle.active span:nth-child(1) {
284
240
 
285
241
  top: 18px;
@@ -294,10 +250,6 @@
294
250
 
295
251
  }
296
252
 
297
-
298
-
299
- /* 2番目と3番目のspanを45度に */
300
-
301
253
  .Toggle.active span:nth-child(2),
302
254
 
303
255
  .Toggle.active span:nth-child(3) {