teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

5

コードの訂正をしました

2021/03/12 14:04

投稿

azaz_wb
azaz_wb

スコア10

title CHANGED
File without changes
body CHANGED
@@ -12,11 +12,19 @@
12
12
  <div class ="header-logo">クリ★スタ</div>
13
13
  <div class="header-list">
14
14
  <ul>
15
+ <li>
16
+ <a href="#desa" style="text-decoration:none;">About</a>
17
+ </li>
18
+ <li>
19
+ <a href="#services" style="text-decoration:none;">Service</a>
20
+ </li>
21
+ <li>
22
+ <a href="#newses" style="text-decoration:none;">News</a>
23
+ </li>
24
+ <li>
15
- <a href="#contacts" style="text-decoration:none;" id="contact">Contact</a>
25
+ <a href="#contacts" style="text-decoration:none;">Contact</a>
16
- <a href="#newses" style="text-decoration:none;" id="content">News</a>
17
- <a href="#services" style="text-decoration:none;" id="serviced">Service</a>
18
- <a href="#desa" style="text-decoration:none;" id="tabout">About</a>
26
+ </li>
19
- </ul>
27
+ </ul>
20
28
  </div>
21
29
 
22
30
  <!-- ハンバーガーメニュー部分 -->
@@ -126,6 +134,27 @@
126
134
  <textarea></textarea>
127
135
  </div>
128
136
 
137
+ <div class="btn">
138
+ <a href="#" class="submit">送信</a>
139
+ </div>
140
+
141
+
142
+ </div>
143
+
144
+ </div>
145
+
146
+ <!-- フッター -->
147
+ <footer>
148
+ <h3>ask.nmt</h3>
149
+ </footer>
150
+ </div>
151
+
152
+ <!-- jQueryの読み込み-->
153
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
154
+ <script src="ask.js"></script>
155
+
156
+ </body>
157
+
129
158
  ```
130
159
  ```css
131
160
  body {
@@ -158,17 +187,20 @@
158
187
  .header-list ul {
159
188
  padding-top: 0;
160
189
  margin-right: 80px;
161
- display: inline;
162
190
  margin: 0;
163
191
  padding: 0;
192
+ display: flex;
193
+ justify-content: flex-end;
164
194
  }
165
195
 
166
- .header-list a {
196
+ .header-list li {
167
- float: right;
168
197
  margin-right: 50px;
169
198
  margin-top: 20px;
199
+ list-style: none;
200
+ }
201
+
202
+ .header-list a {
170
203
  color: white;
171
- display: block;
172
204
  }
173
205
 
174
206
  .header {
@@ -178,6 +210,7 @@
178
210
  border-bottom: solid 2px white;
179
211
  padding:0;
180
212
  margin: 0;
213
+ width: 100%;
181
214
  }
182
215
 
183
216
  .top-wrapper {
@@ -428,7 +461,6 @@
428
461
  text-decoration: none;
429
462
  }
430
463
 
431
-
432
464
  footer {
433
465
  color: white;
434
466
  background-color: black;
@@ -444,8 +476,6 @@
444
476
  font-size: 10px;
445
477
  }
446
478
 
447
-
448
-
449
479
  ```jQuery
450
480
  $(function(){
451
481
  $('a[href^="#"]').click(function(){

4

コードの追記

2021/03/12 14:04

投稿

azaz_wb
azaz_wb

スコア10

title CHANGED
File without changes
body CHANGED
@@ -128,6 +128,74 @@
128
128
 
129
129
  ```
130
130
  ```css
131
+ body {
132
+ font-family: "Noto Sans JP";
133
+ height: 100%;
134
+ width: 100%;
135
+ margin: 0;
136
+ padding: 0;
137
+ }
138
+ html {
139
+ height: 100%;
140
+ }
141
+
142
+ .contents {
143
+ position: relative;
144
+ width: 100%;
145
+ height: auto !important;
146
+ min-height: 100%;
147
+ padding: 0;
148
+ }
149
+
150
+ .header-logo {
151
+ float: left;
152
+ margin-left: 100px;
153
+ font-size: 20px;
154
+ margin-top: 15px;
155
+ padding: 0;
156
+ }
157
+
158
+ .header-list ul {
159
+ padding-top: 0;
160
+ margin-right: 80px;
161
+ display: inline;
162
+ margin: 0;
163
+ padding: 0;
164
+ }
165
+
166
+ .header-list a {
167
+ float: right;
168
+ margin-right: 50px;
169
+ margin-top: 20px;
170
+ color: white;
171
+ display: block;
172
+ }
173
+
174
+ .header {
175
+ color: white;
176
+ background-color: black;
177
+ height: 60px;
178
+ border-bottom: solid 2px white;
179
+ padding:0;
180
+ margin: 0;
181
+ }
182
+
183
+ .top-wrapper {
184
+ background-image: url(img/fv-bgi@2x.jpg);
185
+ color: white;
186
+ height: 720px;
187
+ display: flex;
188
+ justify-content: center;
189
+ align-items: center;
190
+ width: 100%;
191
+ background-size: cover;
192
+ }
193
+
194
+ .title h1 {
195
+ border: 1px solid white;
196
+ padding: 20px 90px;
197
+ }
198
+
131
199
  /* チェックボックスは非表示に */
132
200
  .drawer-hidden {
133
201
  display: none;
@@ -154,7 +222,7 @@
154
222
  .drawer-open span,
155
223
  .drawer-open span:before,
156
224
  .drawer-open span:after {
157
- display: none;
225
+ display: hide;
158
226
  }
159
227
 
160
228
  /* 三本線のうち一番上の棒の位置調整 */
@@ -209,120 +277,175 @@
209
277
  @media (max-width: 700px){
210
278
  #drawer-check:checked ~ .drawer-content {
211
279
  left: 0;/* メニューを画面に入れる */
212
- }}
280
+ }
213
-
281
+ }
214
282
  /* チェックボックスは非表示に */
215
283
  .drawer-hidden {
216
284
  display: none;
217
285
  }
218
286
 
287
+ .body-wrapper {
288
+ height: 100%;
289
+ max-width: 1700px;
290
+ width: 70%;
291
+ margin: 0 auto;
292
+ }
219
293
 
220
- @media (max-width: 700px){
221
- .header {
294
+ .about h3 {
295
+ text-align: center;
222
- width: 100%;
296
+ margin-top: 80px;
223
- border-bottom: solid white;
297
+ margin-bottom: 80px;
298
+ font-size: 30px;
224
- }
299
+ }
225
- .header-list {
226
- display: none;
227
- }
228
- .header-logo {
229
- font-size: 17px;
230
- margin-left: 20px;
231
- }
232
- .title h1 {
233
- padding: 20px 50px;
234
- }
235
- .top-wrapper {
236
- background-image: url(img/fv-bgi_sp@2x.jpg);
237
- }
238
- .body-wrapper {
239
- width: 90%;
240
- }
241
- .service h2 {
242
- width: 100%;
243
- font-size: 20px;
244
- }
245
- .service p {
246
- width: 100%;
247
- font-size: 13px;
248
- }
249
- .service img{
250
- width: 100%;
251
- margin-bottom: 60px;
252
- }
253
- .suport p {
254
- width: 100%;
255
- font-size: 13px;
256
- }
257
- .suport img {
258
- width: 100%;
259
- padding-top: 80px;
260
- margin-bottom: 60px;
261
- }
262
- .suport h2 {
263
- width: 100%;
264
- font-size: 20px;
265
- }
266
- .photo {
267
- width: 100%;
268
- }
269
- .news-title h3 {
270
- padding-top: 140px;
271
- }
272
- .photos {
273
- display: block;
274
- width: 90%;
275
- }
276
- .photo {
277
- margin-bottom: 50px;
278
- }
279
- .contact-form {
280
- margin-top: 40px;
281
- }
282
- input,textarea {
283
- width: 100%;
284
- }
285
- .form p {
286
- width: 100%;
287
- }
288
- .btn a {
289
- padding: 20px 90px;
290
- font-size: 30px;
291
- }
292
300
 
293
- /*ハンバーガーメニュー*/
301
+
294
- .drawer-open span,
302
+ .about p {
295
- .drawer-open span:before,
296
- .drawer-open span:after {
297
- content: '';
298
- display: block;
303
+ display: inline-block;
304
+ margin-top: 50px;
299
- height: 3px;
305
+ line-height: 40px;
300
- width: 25px;
301
- border-radius: 3px;
302
- background: gray;
303
- transition: 0.5s;
304
- position: absolute;
305
306
  }
306
307
 
307
- .drawer-item {
308
+ .service {
309
+ height: 300px;
310
+ }
311
+
312
+ .service h3 {
313
+ text-align: center;
314
+ margin-top: 80px;
315
+ margin-bottom: 80px;
308
316
  font-size: 30px;
317
+ }
318
+
319
+ .camera {
320
+ margin-top: 10px;
321
+ float: left;
322
+ margin-right: 80px;
323
+ width: 50%;
324
+ }
325
+
326
+ .contents h2 {
327
+ margin-top: 80px;
328
+ }
329
+
330
+ .contents p {
331
+ line-height: 30px;
332
+ }
333
+
334
+ .suport {
335
+ height: 400px;
336
+ }
337
+
338
+ .suport img {
339
+ float: right;
340
+ width: 50%;
341
+ margin-left: 80px;
342
+ }
343
+
344
+ .suport h2 {
345
+ margin-top: 180px;
346
+ }
347
+
348
+ .suport p {
349
+ width: 80%;
350
+ }
351
+
352
+ /*ニュース*/
353
+ .news-title h3 {
354
+ text-align: center;
355
+ font-size: 30px;
309
356
  padding-bottom: 40px;
310
357
  }
358
+ .photos {
359
+ display: flex;
360
+ justify-content: space-between;
361
+ margin: 0 auto;
362
+ }
363
+ .photo {
364
+ width: 30%;
365
+ box-shadow: 0px 0px 6px rgba(27, 19, 16, 0.4);
311
366
 
367
+ }
368
+ .photo img {
369
+ display: block;
370
+ width: 100%
371
+ }
372
+
373
+ .photo p {
374
+ margin: 0 auto;
375
+ line-height: 35px;
376
+ font-weight: border;
377
+ padding:10px 30px;
378
+ font-size: 15px;
379
+ }
380
+
381
+ /*こんたくと*/
382
+ .contact-form h3{
383
+ padding-top: 130px;
384
+ text-align: center;
385
+ font-size: 25px;
386
+ }
387
+
388
+ .contact-form {
389
+ padding-bottom: 60px;
390
+ }
391
+
392
+ .form {
393
+ text-align: center;
394
+ }
395
+
396
+ .form p{
397
+ margin-bottom: 5px;
398
+ text-align: left;
399
+ display: inline-block;
400
+ width: 70%
401
+ }
402
+
403
+ input {
404
+ height: 20px;
405
+ width: 70%;
406
+ }
407
+
408
+ textarea {
409
+ height: 150px;
410
+ width: 70%;
411
+ margin-bottom: 60px;
412
+ }
413
+
414
+ .submit {
415
+ background-color: black;
416
+ color: white;
417
+ padding: 20px 90px;
418
+ border-radius: 40px;
419
+ font-size: 20px!important;
420
+ }
421
+
422
+ .btn {
423
+ text-align: center;
424
+ padding-bottom: 50px;
425
+ }
426
+
312
427
  a {
313
428
  text-decoration: none;
314
429
  }
315
430
 
431
+
432
+ footer {
316
- .drawer-list {
433
+ color: white;
434
+ background-color: black;
317
- display:flex;
435
+ height: 40px;
318
- flex-direction: column;
436
+ position: absolute;
319
- justify-content: space-between;
437
+ width: 100%;
438
+ bottom: 0;
320
439
  }
321
440
 
441
+ footer h3 {
442
+ text-align: center;
443
+ font-weight: normal;
444
+ font-size: 10px;
322
- }
445
+ }
323
446
 
324
- ```
325
447
 
448
+
326
449
  ```jQuery
327
450
  $(function(){
328
451
  $('a[href^="#"]').click(function(){

3

タイトルの訂正

2021/03/12 10:19

投稿

azaz_wb
azaz_wb

スコア10

title CHANGED
@@ -1,1 +1,1 @@
1
- ページ内リンクを押すとハンバーガーメニューが表示されてしまう
1
+ ページ内リンクを押も1つか反応しない
body CHANGED
File without changes

2

修正したので書き直しました

2021/03/12 09:08

投稿

azaz_wb
azaz_wb

スコア10

title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,6 @@
1
- ページ内リンクを押すと非表示にしているはずのメニューが表示されてしまいます
1
+ ページ内リンクを押しても1つか反応しせん
2
2
  pc画面ではハンバーガーメニューは非表示にして、ヘッダーにリンクを載せています。
3
- Aboutのみ正常に動くのですが、それ以外はハンバーガーメニュー表示されてしいます
3
+ Aboutのみ正常に動くのですが、それ以外は反応ありせん
4
4
  どこが原因か分からないため、ご教授願います。
5
5
  CSSは途中省略しているため、不足があれば指摘お願いします。
6
6
 
@@ -206,9 +206,10 @@
206
206
  }
207
207
 
208
208
  /* アイコンがクリックされたらメニューを表示 */
209
+ @media (max-width: 700px){
209
210
  #drawer-check:checked ~ .drawer-content {
210
211
  left: 0;/* メニューを画面に入れる */
211
- }
212
+ }}
212
213
 
213
214
  /* チェックボックスは非表示に */
214
215
  .drawer-hidden {

1

脱字の訂正

2021/03/12 09:07

投稿

azaz_wb
azaz_wb

スコア10

title CHANGED
File without changes
body CHANGED
@@ -1,4 +1,4 @@
1
- ページ内リンクを押すとメニューが表示されてしまいます。
1
+ ページ内リンクを押すと非表示にしているはずのメニューが表示されてしまいます。
2
2
  pc画面ではハンバーガーメニューは非表示にして、ヘッダーにリンクを載せています。
3
3
  Aboutのみ正常に動くのですが、それ以外はハンバーガーメニューが表示されてしまいます。
4
4
  どこが原因か分からないため、ご教授願います。