質問編集履歴

5

コードの訂正をしました

2021/03/12 14:04

投稿

azaz_wb
azaz_wb

スコア10

test CHANGED
File without changes
test CHANGED
@@ -26,15 +26,31 @@
26
26
 
27
27
  <ul>
28
28
 
29
+ <li>
30
+
31
+ <a href="#desa" style="text-decoration:none;">About</a>
32
+
33
+ </li>
34
+
35
+ <li>
36
+
37
+ <a href="#services" style="text-decoration:none;">Service</a>
38
+
39
+ </li>
40
+
41
+ <li>
42
+
43
+ <a href="#newses" style="text-decoration:none;">News</a>
44
+
45
+ </li>
46
+
47
+ <li>
48
+
29
- <a href="#contacts" style="text-decoration:none;" id="contact">Contact</a>
49
+ <a href="#contacts" style="text-decoration:none;">Contact</a>
30
-
31
- <a href="#newses" style="text-decoration:none;" id="content">News</a>
50
+
32
-
33
- <a href="#services" style="text-decoration:none;" id="serviced">Service</a>
34
-
35
- <a href="#desa" style="text-decoration:none;" id="tabout">About</a>
51
+ </li>
36
-
52
+
37
- </ul>
53
+ </ul>
38
54
 
39
55
  </div>
40
56
 
@@ -254,6 +270,48 @@
254
270
 
255
271
 
256
272
 
273
+ <div class="btn">
274
+
275
+ <a href="#" class="submit">送信</a>
276
+
277
+ </div>
278
+
279
+
280
+
281
+
282
+
283
+ </div>
284
+
285
+
286
+
287
+ </div>
288
+
289
+
290
+
291
+ <!-- フッター -->
292
+
293
+ <footer>
294
+
295
+ <h3>ask.nmt</h3>
296
+
297
+ </footer>
298
+
299
+ </div>
300
+
301
+
302
+
303
+ <!-- jQueryの読み込み-->
304
+
305
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
306
+
307
+ <script src="ask.js"></script>
308
+
309
+
310
+
311
+ </body>
312
+
313
+
314
+
257
315
  ```
258
316
 
259
317
  ```css
@@ -318,570 +376,576 @@
318
376
 
319
377
  margin-right: 80px;
320
378
 
321
- display: inline;
322
-
323
379
  margin: 0;
324
380
 
325
381
  padding: 0;
326
382
 
383
+ display: flex;
384
+
385
+ justify-content: flex-end;
386
+
387
+ }
388
+
389
+
390
+
391
+ .header-list li {
392
+
393
+ margin-right: 50px;
394
+
395
+ margin-top: 20px;
396
+
397
+ list-style: none;
398
+
327
399
  }
328
400
 
329
401
 
330
402
 
331
403
  .header-list a {
332
404
 
405
+ color: white;
406
+
407
+ }
408
+
409
+
410
+
411
+ .header {
412
+
413
+ color: white;
414
+
415
+ background-color: black;
416
+
417
+ height: 60px;
418
+
419
+ border-bottom: solid 2px white;
420
+
421
+ padding:0;
422
+
423
+ margin: 0;
424
+
425
+ width: 100%;
426
+
427
+ }
428
+
429
+
430
+
431
+ .top-wrapper {
432
+
433
+ background-image: url(img/fv-bgi@2x.jpg);
434
+
435
+ color: white;
436
+
437
+ height: 720px;
438
+
439
+ display: flex;
440
+
441
+ justify-content: center;
442
+
443
+ align-items: center;
444
+
445
+ width: 100%;
446
+
447
+ background-size: cover;
448
+
449
+ }
450
+
451
+
452
+
453
+ .title h1 {
454
+
455
+ border: 1px solid white;
456
+
457
+ padding: 20px 90px;
458
+
459
+ }
460
+
461
+
462
+
463
+ /* チェックボックスは非表示に */
464
+
465
+ .drawer-hidden {
466
+
467
+ display: none;
468
+
469
+ }
470
+
471
+
472
+
473
+ /* ハンバーガーアイコンの設置スペース */
474
+
475
+ .drawer-open {
476
+
477
+ display: flex;
478
+
479
+ height: 60px;
480
+
481
+ width: 30%;
482
+
483
+ justify-content: center;
484
+
485
+ align-items: center;
486
+
487
+ position: relative;
488
+
489
+ z-index: 100;/* 重なり順を一番上に */
490
+
491
+ cursor: pointer;
492
+
333
493
  float: right;
334
494
 
495
+ z-index: 100;
496
+
497
+ position: fixed;
498
+
499
+ top: 0px;
500
+
335
- margin-right: 50px;
501
+ right: 0px;
502
+
336
-
503
+ }
504
+
505
+
506
+
507
+ /* ハンバーガーメニューのアイコン */
508
+
509
+ .drawer-open span,
510
+
511
+ .drawer-open span:before,
512
+
513
+ .drawer-open span:after {
514
+
515
+ display: hide;
516
+
517
+ }
518
+
519
+
520
+
521
+ /* 三本線のうち一番上の棒の位置調整 */
522
+
523
+ .drawer-open span:before {
524
+
525
+ bottom: 8px;
526
+
527
+ }
528
+
529
+
530
+
531
+ /* 三本線のうち一番下の棒の位置調整 */
532
+
533
+ .drawer-open span:after {
534
+
535
+ top: 8px;
536
+
537
+ }
538
+
539
+
540
+
541
+ /* アイコンがクリックされたら真ん中の線を透明にする */
542
+
543
+ #drawer-check:checked ~ .drawer-open span {
544
+
545
+ background: rgba(255, 255, 255, 0);
546
+
547
+ }
548
+
549
+
550
+
551
+ /* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
552
+
553
+ #drawer-check:checked ~ .drawer-open span::before {
554
+
555
+ bottom: 0;
556
+
557
+ transform: rotate(45deg);
558
+
559
+ }
560
+
561
+
562
+
563
+ #drawer-check:checked ~ .drawer-open span::after {
564
+
565
+ top: 0;
566
+
567
+ transform: rotate(-45deg);
568
+
569
+ }
570
+
571
+
572
+
573
+ /* メニューのデザイン*/
574
+
575
+ .drawer-content {
576
+
577
+ width: 100%;
578
+
579
+ height: 100%;
580
+
581
+ position: fixed;
582
+
583
+ top: 0;
584
+
585
+ left: 100%;/* メニューを画面の外に飛ばす */
586
+
587
+ z-index: 99;
588
+
589
+ background: black;
590
+
591
+ transition: .5s;
592
+
593
+ text-align: center;
594
+
337
- margin-top: 20px;
595
+ padding-top: 100px;
596
+
597
+ }
598
+
599
+
600
+
601
+ .drawer-content ul {
602
+
603
+ list-style: none;
604
+
605
+ }
606
+
607
+
608
+
609
+ .drawer-content a {
338
610
 
339
611
  color: white;
340
612
 
613
+ }
614
+
615
+
616
+
617
+ /* アイコンがクリックされたらメニューを表示 */
618
+
619
+ @media (max-width: 700px){
620
+
621
+ #drawer-check:checked ~ .drawer-content {
622
+
623
+ left: 0;/* メニューを画面に入れる */
624
+
625
+ }
626
+
627
+ }
628
+
629
+ /* チェックボックスは非表示に */
630
+
631
+ .drawer-hidden {
632
+
633
+ display: none;
634
+
635
+ }
636
+
637
+
638
+
639
+ .body-wrapper {
640
+
641
+ height: 100%;
642
+
643
+ max-width: 1700px;
644
+
645
+ width: 70%;
646
+
647
+ margin: 0 auto;
648
+
649
+ }
650
+
651
+
652
+
653
+ .about h3 {
654
+
655
+ text-align: center;
656
+
657
+ margin-top: 80px;
658
+
659
+ margin-bottom: 80px;
660
+
661
+ font-size: 30px;
662
+
663
+ }
664
+
665
+
666
+
667
+
668
+
669
+ .about p {
670
+
671
+ display: inline-block;
672
+
673
+ margin-top: 50px;
674
+
675
+ line-height: 40px;
676
+
677
+ }
678
+
679
+
680
+
681
+ .service {
682
+
683
+ height: 300px;
684
+
685
+ }
686
+
687
+
688
+
689
+ .service h3 {
690
+
691
+ text-align: center;
692
+
693
+ margin-top: 80px;
694
+
695
+ margin-bottom: 80px;
696
+
697
+ font-size: 30px;
698
+
699
+ }
700
+
701
+
702
+
703
+ .camera {
704
+
705
+ margin-top: 10px;
706
+
707
+ float: left;
708
+
709
+ margin-right: 80px;
710
+
711
+ width: 50%;
712
+
713
+ }
714
+
715
+
716
+
717
+ .contents h2 {
718
+
719
+ margin-top: 80px;
720
+
721
+ }
722
+
723
+
724
+
725
+ .contents p {
726
+
727
+ line-height: 30px;
728
+
729
+ }
730
+
731
+
732
+
733
+ .suport {
734
+
735
+ height: 400px;
736
+
737
+ }
738
+
739
+
740
+
741
+ .suport img {
742
+
743
+ float: right;
744
+
745
+ width: 50%;
746
+
747
+ margin-left: 80px;
748
+
749
+ }
750
+
751
+
752
+
753
+ .suport h2 {
754
+
755
+ margin-top: 180px;
756
+
757
+ }
758
+
759
+
760
+
761
+ .suport p {
762
+
763
+ width: 80%;
764
+
765
+ }
766
+
767
+
768
+
769
+ /*ニュース*/
770
+
771
+ .news-title h3 {
772
+
773
+ text-align: center;
774
+
775
+ font-size: 30px;
776
+
777
+ padding-bottom: 40px;
778
+
779
+ }
780
+
781
+ .photos {
782
+
783
+ display: flex;
784
+
785
+ justify-content: space-between;
786
+
787
+ margin: 0 auto;
788
+
789
+ }
790
+
791
+ .photo {
792
+
793
+ width: 30%;
794
+
795
+ box-shadow: 0px 0px 6px rgba(27, 19, 16, 0.4);
796
+
797
+
798
+
799
+ }
800
+
801
+ .photo img {
802
+
341
803
  display: block;
342
804
 
805
+ width: 100%
806
+
343
- }
807
+ }
344
-
345
-
346
-
808
+
809
+
810
+
347
- .header {
811
+ .photo p {
812
+
813
+ margin: 0 auto;
814
+
815
+ line-height: 35px;
816
+
817
+ font-weight: border;
818
+
819
+ padding:10px 30px;
820
+
821
+ font-size: 15px;
822
+
823
+ }
824
+
825
+
826
+
827
+ /*こんたくと*/
828
+
829
+ .contact-form h3{
830
+
831
+ padding-top: 130px;
832
+
833
+ text-align: center;
834
+
835
+ font-size: 25px;
836
+
837
+ }
838
+
839
+
840
+
841
+ .contact-form {
842
+
843
+ padding-bottom: 60px;
844
+
845
+ }
846
+
847
+
848
+
849
+ .form {
850
+
851
+ text-align: center;
852
+
853
+ }
854
+
855
+
856
+
857
+ .form p{
858
+
859
+ margin-bottom: 5px;
860
+
861
+ text-align: left;
862
+
863
+ display: inline-block;
864
+
865
+ width: 70%
866
+
867
+ }
868
+
869
+
870
+
871
+ input {
872
+
873
+ height: 20px;
874
+
875
+ width: 70%;
876
+
877
+ }
878
+
879
+
880
+
881
+ textarea {
882
+
883
+ height: 150px;
884
+
885
+ width: 70%;
886
+
887
+ margin-bottom: 60px;
888
+
889
+ }
890
+
891
+
892
+
893
+ .submit {
894
+
895
+ background-color: black;
348
896
 
349
897
  color: white;
350
898
 
899
+ padding: 20px 90px;
900
+
901
+ border-radius: 40px;
902
+
903
+ font-size: 20px!important;
904
+
905
+ }
906
+
907
+
908
+
909
+ .btn {
910
+
911
+ text-align: center;
912
+
913
+ padding-bottom: 50px;
914
+
915
+ }
916
+
917
+
918
+
919
+ a {
920
+
921
+ text-decoration: none;
922
+
923
+ }
924
+
925
+
926
+
927
+ footer {
928
+
929
+ color: white;
930
+
351
931
  background-color: black;
352
932
 
353
- height: 60px;
933
+ height: 40px;
354
-
355
- border-bottom: solid 2px white;
934
+
356
-
357
- padding:0;
358
-
359
- margin: 0;
360
-
361
- }
362
-
363
-
364
-
365
- .top-wrapper {
366
-
367
- background-image: url(img/fv-bgi@2x.jpg);
368
-
369
- color: white;
935
+ position: absolute;
370
-
371
- height: 720px;
372
-
373
- display: flex;
374
-
375
- justify-content: center;
376
-
377
- align-items: center;
378
936
 
379
937
  width: 100%;
380
938
 
381
- background-size: cover;
382
-
383
- }
384
-
385
-
386
-
387
- .title h1 {
388
-
389
- border: 1px solid white;
390
-
391
- padding: 20px 90px;
392
-
393
- }
394
-
395
-
396
-
397
- /* チェックボックスは非表示に */
398
-
399
- .drawer-hidden {
400
-
401
- display: none;
402
-
403
- }
404
-
405
-
406
-
407
- /* ハンバーガーアイコンの設置スペース */
408
-
409
- .drawer-open {
410
-
411
- display: flex;
412
-
413
- height: 60px;
414
-
415
- width: 30%;
416
-
417
- justify-content: center;
418
-
419
- align-items: center;
420
-
421
- position: relative;
422
-
423
- z-index: 100;/* 重なり順を一番上に */
424
-
425
- cursor: pointer;
426
-
427
- float: right;
428
-
429
- z-index: 100;
430
-
431
- position: fixed;
432
-
433
- top: 0px;
434
-
435
- right: 0px;
436
-
437
- }
438
-
439
-
440
-
441
- /* ハンバーガーメニューのアイコン */
442
-
443
- .drawer-open span,
444
-
445
- .drawer-open span:before,
446
-
447
- .drawer-open span:after {
448
-
449
- display: hide;
450
-
451
- }
452
-
453
-
454
-
455
- /* 三本線のうち一番上の棒の位置調整 */
456
-
457
- .drawer-open span:before {
458
-
459
- bottom: 8px;
460
-
461
- }
462
-
463
-
464
-
465
- /* 三本線のうち一番下の棒の位置調整 */
466
-
467
- .drawer-open span:after {
468
-
469
- top: 8px;
470
-
471
- }
472
-
473
-
474
-
475
- /* アイコンがクリックされたら真ん中の線を透明にする */
476
-
477
- #drawer-check:checked ~ .drawer-open span {
478
-
479
- background: rgba(255, 255, 255, 0);
480
-
481
- }
482
-
483
-
484
-
485
- /* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
486
-
487
- #drawer-check:checked ~ .drawer-open span::before {
488
-
489
939
  bottom: 0;
490
940
 
491
- transform: rotate(45deg);
492
-
493
- }
941
+ }
494
-
495
-
496
-
497
- #drawer-check:checked ~ .drawer-open span::after {
942
+
498
-
499
- top: 0;
943
+
500
-
501
- transform: rotate(-45deg);
944
+
502
-
503
- }
504
-
505
-
506
-
507
- /* メニューのデザイン*/
508
-
509
- .drawer-content {
510
-
511
- width: 100%;
945
+ footer h3 {
512
-
513
- height: 100%;
514
-
515
- position: fixed;
516
-
517
- top: 0;
518
-
519
- left: 100%;/* メニューを画面の外に飛ばす */
520
-
521
- z-index: 99;
522
-
523
- background: black;
524
-
525
- transition: .5s;
526
946
 
527
947
  text-align: center;
528
948
 
529
- padding-top: 100px;
530
-
531
- }
532
-
533
-
534
-
535
- .drawer-content ul {
536
-
537
- list-style: none;
538
-
539
- }
540
-
541
-
542
-
543
- .drawer-content a {
544
-
545
- color: white;
546
-
547
- }
548
-
549
-
550
-
551
- /* アイコンがクリックされたらメニューを表示 */
552
-
553
- @media (max-width: 700px){
554
-
555
- #drawer-check:checked ~ .drawer-content {
556
-
557
- left: 0;/* メニューを画面に入れる */
558
-
559
- }
560
-
561
- }
562
-
563
- /* チェックボックスは非表示に */
564
-
565
- .drawer-hidden {
566
-
567
- display: none;
568
-
569
- }
570
-
571
-
572
-
573
- .body-wrapper {
574
-
575
- height: 100%;
576
-
577
- max-width: 1700px;
578
-
579
- width: 70%;
580
-
581
- margin: 0 auto;
582
-
583
- }
584
-
585
-
586
-
587
- .about h3 {
588
-
589
- text-align: center;
590
-
591
- margin-top: 80px;
592
-
593
- margin-bottom: 80px;
594
-
595
- font-size: 30px;
596
-
597
- }
598
-
599
-
600
-
601
-
602
-
603
- .about p {
604
-
605
- display: inline-block;
606
-
607
- margin-top: 50px;
608
-
609
- line-height: 40px;
610
-
611
- }
612
-
613
-
614
-
615
- .service {
616
-
617
- height: 300px;
618
-
619
- }
620
-
621
-
622
-
623
- .service h3 {
624
-
625
- text-align: center;
626
-
627
- margin-top: 80px;
628
-
629
- margin-bottom: 80px;
630
-
631
- font-size: 30px;
632
-
633
- }
634
-
635
-
636
-
637
- .camera {
638
-
639
- margin-top: 10px;
640
-
641
- float: left;
642
-
643
- margin-right: 80px;
644
-
645
- width: 50%;
646
-
647
- }
648
-
649
-
650
-
651
- .contents h2 {
652
-
653
- margin-top: 80px;
654
-
655
- }
656
-
657
-
658
-
659
- .contents p {
660
-
661
- line-height: 30px;
662
-
663
- }
664
-
665
-
666
-
667
- .suport {
668
-
669
- height: 400px;
670
-
671
- }
672
-
673
-
674
-
675
- .suport img {
676
-
677
- float: right;
678
-
679
- width: 50%;
680
-
681
- margin-left: 80px;
682
-
683
- }
684
-
685
-
686
-
687
- .suport h2 {
688
-
689
- margin-top: 180px;
690
-
691
- }
692
-
693
-
694
-
695
- .suport p {
696
-
697
- width: 80%;
698
-
699
- }
700
-
701
-
702
-
703
- /*ニュース*/
704
-
705
- .news-title h3 {
706
-
707
- text-align: center;
708
-
709
- font-size: 30px;
710
-
711
- padding-bottom: 40px;
712
-
713
- }
714
-
715
- .photos {
716
-
717
- display: flex;
718
-
719
- justify-content: space-between;
720
-
721
- margin: 0 auto;
722
-
723
- }
724
-
725
- .photo {
726
-
727
- width: 30%;
728
-
729
- box-shadow: 0px 0px 6px rgba(27, 19, 16, 0.4);
730
-
731
-
732
-
733
- }
734
-
735
- .photo img {
736
-
737
- display: block;
738
-
739
- width: 100%
740
-
741
- }
742
-
743
-
744
-
745
- .photo p {
746
-
747
- margin: 0 auto;
748
-
749
- line-height: 35px;
750
-
751
- font-weight: border;
752
-
753
- padding:10px 30px;
754
-
755
- font-size: 15px;
756
-
757
- }
758
-
759
-
760
-
761
- /*こんたくと*/
762
-
763
- .contact-form h3{
764
-
765
- padding-top: 130px;
766
-
767
- text-align: center;
768
-
769
- font-size: 25px;
770
-
771
- }
772
-
773
-
774
-
775
- .contact-form {
776
-
777
- padding-bottom: 60px;
778
-
779
- }
780
-
781
-
782
-
783
- .form {
784
-
785
- text-align: center;
786
-
787
- }
788
-
789
-
790
-
791
- .form p{
792
-
793
- margin-bottom: 5px;
794
-
795
- text-align: left;
796
-
797
- display: inline-block;
798
-
799
- width: 70%
800
-
801
- }
802
-
803
-
804
-
805
- input {
806
-
807
- height: 20px;
808
-
809
- width: 70%;
810
-
811
- }
812
-
813
-
814
-
815
- textarea {
816
-
817
- height: 150px;
818
-
819
- width: 70%;
820
-
821
- margin-bottom: 60px;
822
-
823
- }
824
-
825
-
826
-
827
- .submit {
828
-
829
- background-color: black;
830
-
831
- color: white;
832
-
833
- padding: 20px 90px;
834
-
835
- border-radius: 40px;
836
-
837
- font-size: 20px!important;
838
-
839
- }
840
-
841
-
842
-
843
- .btn {
844
-
845
- text-align: center;
846
-
847
- padding-bottom: 50px;
848
-
849
- }
850
-
851
-
852
-
853
- a {
854
-
855
- text-decoration: none;
856
-
857
- }
858
-
859
-
860
-
861
-
862
-
863
- footer {
864
-
865
- color: white;
866
-
867
- background-color: black;
868
-
869
- height: 40px;
870
-
871
- position: absolute;
872
-
873
- width: 100%;
874
-
875
- bottom: 0;
876
-
877
- }
878
-
879
-
880
-
881
- footer h3 {
882
-
883
- text-align: center;
884
-
885
949
  font-weight: normal;
886
950
 
887
951
  font-size: 10px;
@@ -890,10 +954,6 @@
890
954
 
891
955
 
892
956
 
893
-
894
-
895
-
896
-
897
957
  ```jQuery
898
958
 
899
959
  $(function(){

4

コードの追記

2021/03/12 14:04

投稿

azaz_wb
azaz_wb

スコア10

test CHANGED
File without changes
test CHANGED
@@ -258,6 +258,142 @@
258
258
 
259
259
  ```css
260
260
 
261
+ body {
262
+
263
+ font-family: "Noto Sans JP";
264
+
265
+ height: 100%;
266
+
267
+ width: 100%;
268
+
269
+ margin: 0;
270
+
271
+ padding: 0;
272
+
273
+ }
274
+
275
+ html {
276
+
277
+ height: 100%;
278
+
279
+ }
280
+
281
+
282
+
283
+ .contents {
284
+
285
+ position: relative;
286
+
287
+ width: 100%;
288
+
289
+ height: auto !important;
290
+
291
+ min-height: 100%;
292
+
293
+ padding: 0;
294
+
295
+ }
296
+
297
+
298
+
299
+ .header-logo {
300
+
301
+ float: left;
302
+
303
+ margin-left: 100px;
304
+
305
+ font-size: 20px;
306
+
307
+ margin-top: 15px;
308
+
309
+ padding: 0;
310
+
311
+ }
312
+
313
+
314
+
315
+ .header-list ul {
316
+
317
+ padding-top: 0;
318
+
319
+ margin-right: 80px;
320
+
321
+ display: inline;
322
+
323
+ margin: 0;
324
+
325
+ padding: 0;
326
+
327
+ }
328
+
329
+
330
+
331
+ .header-list a {
332
+
333
+ float: right;
334
+
335
+ margin-right: 50px;
336
+
337
+ margin-top: 20px;
338
+
339
+ color: white;
340
+
341
+ display: block;
342
+
343
+ }
344
+
345
+
346
+
347
+ .header {
348
+
349
+ color: white;
350
+
351
+ background-color: black;
352
+
353
+ height: 60px;
354
+
355
+ border-bottom: solid 2px white;
356
+
357
+ padding:0;
358
+
359
+ margin: 0;
360
+
361
+ }
362
+
363
+
364
+
365
+ .top-wrapper {
366
+
367
+ background-image: url(img/fv-bgi@2x.jpg);
368
+
369
+ color: white;
370
+
371
+ height: 720px;
372
+
373
+ display: flex;
374
+
375
+ justify-content: center;
376
+
377
+ align-items: center;
378
+
379
+ width: 100%;
380
+
381
+ background-size: cover;
382
+
383
+ }
384
+
385
+
386
+
387
+ .title h1 {
388
+
389
+ border: 1px solid white;
390
+
391
+ padding: 20px 90px;
392
+
393
+ }
394
+
395
+
396
+
261
397
  /* チェックボックスは非表示に */
262
398
 
263
399
  .drawer-hidden {
@@ -310,372 +446,482 @@
310
446
 
311
447
  .drawer-open span:after {
312
448
 
449
+ display: hide;
450
+
451
+ }
452
+
453
+
454
+
455
+ /* 三本線のうち一番上の棒の位置調整 */
456
+
457
+ .drawer-open span:before {
458
+
459
+ bottom: 8px;
460
+
461
+ }
462
+
463
+
464
+
465
+ /* 三本線のうち一番下の棒の位置調整 */
466
+
467
+ .drawer-open span:after {
468
+
469
+ top: 8px;
470
+
471
+ }
472
+
473
+
474
+
475
+ /* アイコンがクリックされたら真ん中の線を透明にする */
476
+
477
+ #drawer-check:checked ~ .drawer-open span {
478
+
479
+ background: rgba(255, 255, 255, 0);
480
+
481
+ }
482
+
483
+
484
+
485
+ /* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
486
+
487
+ #drawer-check:checked ~ .drawer-open span::before {
488
+
489
+ bottom: 0;
490
+
491
+ transform: rotate(45deg);
492
+
493
+ }
494
+
495
+
496
+
497
+ #drawer-check:checked ~ .drawer-open span::after {
498
+
499
+ top: 0;
500
+
501
+ transform: rotate(-45deg);
502
+
503
+ }
504
+
505
+
506
+
507
+ /* メニューのデザイン*/
508
+
509
+ .drawer-content {
510
+
511
+ width: 100%;
512
+
513
+ height: 100%;
514
+
515
+ position: fixed;
516
+
517
+ top: 0;
518
+
519
+ left: 100%;/* メニューを画面の外に飛ばす */
520
+
521
+ z-index: 99;
522
+
523
+ background: black;
524
+
525
+ transition: .5s;
526
+
527
+ text-align: center;
528
+
529
+ padding-top: 100px;
530
+
531
+ }
532
+
533
+
534
+
535
+ .drawer-content ul {
536
+
537
+ list-style: none;
538
+
539
+ }
540
+
541
+
542
+
543
+ .drawer-content a {
544
+
545
+ color: white;
546
+
547
+ }
548
+
549
+
550
+
551
+ /* アイコンがクリックされたらメニューを表示 */
552
+
553
+ @media (max-width: 700px){
554
+
555
+ #drawer-check:checked ~ .drawer-content {
556
+
557
+ left: 0;/* メニューを画面に入れる */
558
+
559
+ }
560
+
561
+ }
562
+
563
+ /* チェックボックスは非表示に */
564
+
565
+ .drawer-hidden {
566
+
313
567
  display: none;
314
568
 
315
569
  }
316
570
 
317
571
 
318
572
 
319
- /* 三本線のうち一番上の棒の位置調整 */
320
-
321
- .drawer-open span:before {
322
-
323
- bottom: 8px;
324
-
325
- }
326
-
327
-
328
-
329
- /* 三本線のうち一番下の棒の位置調整 */
330
-
331
- .drawer-open span:after {
332
-
333
- top: 8px;
334
-
335
- }
336
-
337
-
338
-
339
- /* アイコンがクリックされたら真ん中の線を透明にする */
340
-
341
- #drawer-check:checked ~ .drawer-open span {
342
-
343
- background: rgba(255, 255, 255, 0);
344
-
345
- }
346
-
347
-
348
-
349
- /* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
350
-
351
- #drawer-check:checked ~ .drawer-open span::before {
573
+ .body-wrapper {
574
+
575
+ height: 100%;
576
+
577
+ max-width: 1700px;
578
+
579
+ width: 70%;
580
+
581
+ margin: 0 auto;
582
+
583
+ }
584
+
585
+
586
+
587
+ .about h3 {
588
+
589
+ text-align: center;
590
+
591
+ margin-top: 80px;
592
+
593
+ margin-bottom: 80px;
594
+
595
+ font-size: 30px;
596
+
597
+ }
598
+
599
+
600
+
601
+
602
+
603
+ .about p {
604
+
605
+ display: inline-block;
606
+
607
+ margin-top: 50px;
608
+
609
+ line-height: 40px;
610
+
611
+ }
612
+
613
+
614
+
615
+ .service {
616
+
617
+ height: 300px;
618
+
619
+ }
620
+
621
+
622
+
623
+ .service h3 {
624
+
625
+ text-align: center;
626
+
627
+ margin-top: 80px;
628
+
629
+ margin-bottom: 80px;
630
+
631
+ font-size: 30px;
632
+
633
+ }
634
+
635
+
636
+
637
+ .camera {
638
+
639
+ margin-top: 10px;
640
+
641
+ float: left;
642
+
643
+ margin-right: 80px;
644
+
645
+ width: 50%;
646
+
647
+ }
648
+
649
+
650
+
651
+ .contents h2 {
652
+
653
+ margin-top: 80px;
654
+
655
+ }
656
+
657
+
658
+
659
+ .contents p {
660
+
661
+ line-height: 30px;
662
+
663
+ }
664
+
665
+
666
+
667
+ .suport {
668
+
669
+ height: 400px;
670
+
671
+ }
672
+
673
+
674
+
675
+ .suport img {
676
+
677
+ float: right;
678
+
679
+ width: 50%;
680
+
681
+ margin-left: 80px;
682
+
683
+ }
684
+
685
+
686
+
687
+ .suport h2 {
688
+
689
+ margin-top: 180px;
690
+
691
+ }
692
+
693
+
694
+
695
+ .suport p {
696
+
697
+ width: 80%;
698
+
699
+ }
700
+
701
+
702
+
703
+ /*ニュース*/
704
+
705
+ .news-title h3 {
706
+
707
+ text-align: center;
708
+
709
+ font-size: 30px;
710
+
711
+ padding-bottom: 40px;
712
+
713
+ }
714
+
715
+ .photos {
716
+
717
+ display: flex;
718
+
719
+ justify-content: space-between;
720
+
721
+ margin: 0 auto;
722
+
723
+ }
724
+
725
+ .photo {
726
+
727
+ width: 30%;
728
+
729
+ box-shadow: 0px 0px 6px rgba(27, 19, 16, 0.4);
730
+
731
+
732
+
733
+ }
734
+
735
+ .photo img {
736
+
737
+ display: block;
738
+
739
+ width: 100%
740
+
741
+ }
742
+
743
+
744
+
745
+ .photo p {
746
+
747
+ margin: 0 auto;
748
+
749
+ line-height: 35px;
750
+
751
+ font-weight: border;
752
+
753
+ padding:10px 30px;
754
+
755
+ font-size: 15px;
756
+
757
+ }
758
+
759
+
760
+
761
+ /*こんたくと*/
762
+
763
+ .contact-form h3{
764
+
765
+ padding-top: 130px;
766
+
767
+ text-align: center;
768
+
769
+ font-size: 25px;
770
+
771
+ }
772
+
773
+
774
+
775
+ .contact-form {
776
+
777
+ padding-bottom: 60px;
778
+
779
+ }
780
+
781
+
782
+
783
+ .form {
784
+
785
+ text-align: center;
786
+
787
+ }
788
+
789
+
790
+
791
+ .form p{
792
+
793
+ margin-bottom: 5px;
794
+
795
+ text-align: left;
796
+
797
+ display: inline-block;
798
+
799
+ width: 70%
800
+
801
+ }
802
+
803
+
804
+
805
+ input {
806
+
807
+ height: 20px;
808
+
809
+ width: 70%;
810
+
811
+ }
812
+
813
+
814
+
815
+ textarea {
816
+
817
+ height: 150px;
818
+
819
+ width: 70%;
820
+
821
+ margin-bottom: 60px;
822
+
823
+ }
824
+
825
+
826
+
827
+ .submit {
828
+
829
+ background-color: black;
830
+
831
+ color: white;
832
+
833
+ padding: 20px 90px;
834
+
835
+ border-radius: 40px;
836
+
837
+ font-size: 20px!important;
838
+
839
+ }
840
+
841
+
842
+
843
+ .btn {
844
+
845
+ text-align: center;
846
+
847
+ padding-bottom: 50px;
848
+
849
+ }
850
+
851
+
852
+
853
+ a {
854
+
855
+ text-decoration: none;
856
+
857
+ }
858
+
859
+
860
+
861
+
862
+
863
+ footer {
864
+
865
+ color: white;
866
+
867
+ background-color: black;
868
+
869
+ height: 40px;
870
+
871
+ position: absolute;
872
+
873
+ width: 100%;
352
874
 
353
875
  bottom: 0;
354
876
 
355
- transform: rotate(45deg);
356
-
357
- }
877
+ }
358
-
359
-
360
-
361
- #drawer-check:checked ~ .drawer-open span::after {
878
+
362
-
363
- top: 0;
879
+
364
-
365
- transform: rotate(-45deg);
880
+
366
-
367
- }
368
-
369
-
370
-
371
- /* メニューのデザイン*/
372
-
373
- .drawer-content {
374
-
375
- width: 100%;
881
+ footer h3 {
376
-
377
- height: 100%;
378
-
379
- position: fixed;
380
-
381
- top: 0;
382
-
383
- left: 100%;/* メニューを画面の外に飛ばす */
384
-
385
- z-index: 99;
386
-
387
- background: black;
388
-
389
- transition: .5s;
390
882
 
391
883
  text-align: center;
392
884
 
393
- padding-top: 100px;
394
-
395
- }
396
-
397
-
398
-
399
- .drawer-content ul {
400
-
401
- list-style: none;
402
-
403
- }
404
-
405
-
406
-
407
- .drawer-content a {
408
-
409
- color: white;
410
-
411
- }
412
-
413
-
414
-
415
- /* アイコンがクリックされたらメニューを表示 */
416
-
417
- @media (max-width: 700px){
418
-
419
- #drawer-check:checked ~ .drawer-content {
420
-
421
- left: 0;/* メニューを画面に入れる */
422
-
423
- }}
424
-
425
-
426
-
427
- /* チェックボックスは非表示に */
428
-
429
- .drawer-hidden {
430
-
431
- display: none;
432
-
433
- }
434
-
435
-
436
-
437
-
438
-
439
- @media (max-width: 700px){
440
-
441
- .header {
442
-
443
- width: 100%;
444
-
445
- border-bottom: solid white;
446
-
447
- }
448
-
449
- .header-list {
450
-
451
- display: none;
452
-
453
- }
454
-
455
- .header-logo {
456
-
457
- font-size: 17px;
458
-
459
- margin-left: 20px;
460
-
461
- }
462
-
463
- .title h1 {
464
-
465
- padding: 20px 50px;
466
-
467
- }
468
-
469
- .top-wrapper {
470
-
471
- background-image: url(img/fv-bgi_sp@2x.jpg);
472
-
473
- }
474
-
475
- .body-wrapper {
476
-
477
- width: 90%;
478
-
479
- }
480
-
481
- .service h2 {
482
-
483
- width: 100%;
484
-
485
- font-size: 20px;
486
-
487
- }
488
-
489
- .service p {
490
-
491
- width: 100%;
492
-
493
- font-size: 13px;
494
-
495
- }
496
-
497
- .service img{
498
-
499
- width: 100%;
500
-
501
- margin-bottom: 60px;
502
-
503
- }
504
-
505
- .suport p {
506
-
507
- width: 100%;
508
-
509
- font-size: 13px;
510
-
511
- }
512
-
513
- .suport img {
514
-
515
- width: 100%;
516
-
517
- padding-top: 80px;
518
-
519
- margin-bottom: 60px;
520
-
521
- }
522
-
523
- .suport h2 {
524
-
525
- width: 100%;
526
-
527
- font-size: 20px;
528
-
529
- }
530
-
531
- .photo {
532
-
533
- width: 100%;
534
-
535
- }
536
-
537
- .news-title h3 {
538
-
539
- padding-top: 140px;
540
-
541
- }
542
-
543
- .photos {
544
-
545
- display: block;
546
-
547
- width: 90%;
548
-
549
- }
550
-
551
- .photo {
552
-
553
- margin-bottom: 50px;
554
-
555
- }
556
-
557
- .contact-form {
558
-
559
- margin-top: 40px;
560
-
561
- }
562
-
563
- input,textarea {
564
-
565
- width: 100%;
566
-
567
- }
568
-
569
- .form p {
570
-
571
- width: 100%;
572
-
573
- }
574
-
575
- .btn a {
576
-
577
- padding: 20px 90px;
578
-
579
- font-size: 30px;
580
-
581
- }
582
-
583
-
584
-
585
- /*ハンバーガーメニュー*/
586
-
587
- .drawer-open span,
588
-
589
- .drawer-open span:before,
590
-
591
- .drawer-open span:after {
592
-
593
- content: '';
594
-
595
- display: block;
596
-
597
- height: 3px;
598
-
599
- width: 25px;
600
-
601
- border-radius: 3px;
602
-
603
- background: gray;
604
-
605
- transition: 0.5s;
606
-
607
- position: absolute;
608
-
609
- }
610
-
611
-
612
-
613
- .drawer-item {
614
-
615
- font-size: 30px;
616
-
617
- padding-bottom: 40px;
618
-
619
- }
620
-
621
-
622
-
623
- a {
624
-
625
- text-decoration: none;
626
-
627
- }
628
-
629
-
630
-
631
- .drawer-list {
632
-
633
- display:flex;
634
-
635
- flex-direction: column;
636
-
637
- justify-content: space-between;
638
-
639
- }
640
-
641
-
642
-
643
- }
644
-
645
-
885
+ font-weight: normal;
886
+
887
+ font-size: 10px;
888
+
889
+ }
890
+
891
+
892
+
893
+
894
+
895
+
896
+
897
+ ```jQuery
898
+
899
+ $(function(){
900
+
901
+ $('a[href^="#"]').click(function(){
902
+
903
+ var speed = 1000;
904
+
905
+ var href= $(this).attr("href");
906
+
907
+ var target = $(href == "#" || href == "" ? 'html' : href);
908
+
909
+ $("html, body").animate(
910
+
911
+ {scrollTop: target.offset().top}, speed, "swing");
912
+
913
+ return false;
914
+
915
+ });
916
+
917
+ });
918
+
919
+
920
+
921
+ $('#humber a[href]').on('click', function(event) {
922
+
923
+ $('.drawer-open').trigger('click');
924
+
925
+ });
646
926
 
647
927
  ```
648
-
649
-
650
-
651
- ```jQuery
652
-
653
- $(function(){
654
-
655
- $('a[href^="#"]').click(function(){
656
-
657
- var speed = 1000;
658
-
659
- var href= $(this).attr("href");
660
-
661
- var target = $(href == "#" || href == "" ? 'html' : href);
662
-
663
- $("html, body").animate(
664
-
665
- {scrollTop: target.offset().top}, speed, "swing");
666
-
667
- return false;
668
-
669
- });
670
-
671
- });
672
-
673
-
674
-
675
- $('#humber a[href]').on('click', function(event) {
676
-
677
- $('.drawer-open').trigger('click');
678
-
679
- });
680
-
681
- ```

3

タイトルの訂正

2021/03/12 10:19

投稿

azaz_wb
azaz_wb

スコア10

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

2

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

2021/03/12 09:08

投稿

azaz_wb
azaz_wb

スコア10

test CHANGED
File without changes
test CHANGED
@@ -1,8 +1,8 @@
1
- ページ内リンクを押すと非表示にしているはずのメニューが表示されてしまいます
1
+ ページ内リンクを押しても1つか反応しせん
2
2
 
3
3
  pc画面ではハンバーガーメニューは非表示にして、ヘッダーにリンクを載せています。
4
4
 
5
- Aboutのみ正常に動くのですが、それ以外はハンバーガーメニュー表示されてしいます
5
+ Aboutのみ正常に動くのですが、それ以外は反応ありせん
6
6
 
7
7
  どこが原因か分からないため、ご教授願います。
8
8
 
@@ -414,11 +414,13 @@
414
414
 
415
415
  /* アイコンがクリックされたらメニューを表示 */
416
416
 
417
+ @media (max-width: 700px){
418
+
417
419
  #drawer-check:checked ~ .drawer-content {
418
420
 
419
421
  left: 0;/* メニューを画面に入れる */
420
422
 
421
- }
423
+ }}
422
424
 
423
425
 
424
426
 

1

脱字の訂正

2021/03/12 09:07

投稿

azaz_wb
azaz_wb

スコア10

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- ページ内リンクを押すとメニューが表示されてしまいます。
1
+ ページ内リンクを押すと非表示にしているはずのメニューが表示されてしまいます。
2
2
 
3
3
  pc画面ではハンバーガーメニューは非表示にして、ヘッダーにリンクを載せています。
4
4