質問編集履歴

3

HTML,CSS修正しました。

2021/10/29 07:11

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
@@ -12,8 +12,6 @@
12
12
 
13
13
  ご教授いただけると幸いです。
14
14
 
15
-
16
-
17
15
  ### 発生している問題・エラーメッセージ
18
16
 
19
17
 
@@ -26,7 +24,7 @@
26
24
 
27
25
  ### 試したこと
28
26
 
29
- fvのulni
27
+ fvのul li
30
28
 
31
29
  overflow:hiddenを設定しているが、余白が出てしまう
32
30
 
@@ -34,644 +32,908 @@
34
32
 
35
33
 
36
34
 
37
-
38
-
39
35
  ### 該当のソースコード
40
36
 
41
37
 
42
38
 
43
- ```HTML
44
-
45
- <!DOCTYPE html>
46
-
47
- <html lang="jp">
48
-
49
- <head>
50
-
51
- <meta charset="UTF-8">
52
-
53
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
54
-
55
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
56
-
57
- <title></title>
58
-
59
- <meta name="description" content="日本古来の素材と現代的表現を併せ持つ温泉旅館、石井花壇。伝統的な「和」の息づく空間で、至極のひとときをお過ごしください。">
60
-
61
- <link rel="stylesheet" href="./css/destyle.css">
62
-
63
- <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
64
-
65
- <!--flatpicker-->
66
-
67
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
68
-
69
- <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
70
-
71
- <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>
72
-
73
- <link rel="stylesheet" href="./css/style.css">
74
-
75
-
76
-
77
- </head>
78
-
79
- <body class="drawer drawer-right drawer-open" data-aos-easing="ease" data-aos-duration="2000" data-aos-delay="0">
80
-
81
- <!-- <div class="nav-wrapper"> -->
82
-
83
- <header class="header">
84
-
85
- <div class="header-inner">
86
-
87
- <div class="header-left">
88
-
89
- <h1 class="logo">
90
-
91
- <a href="#">
92
-
93
- <img class="header-logo" src="/img/top-header-logo.png" alt="">
94
-
95
- </a>
96
-
97
- </h1>
98
-
99
-
100
-
101
- <nav class="nav nav-open drawer-nav">
102
-
103
- <ul class="header-list">
104
-
105
- <li class="header-item"> <a href="./Room/room.html">お部屋</a></li><!-- /.header-item -->
106
-
107
- <li class="header-item"> <a href="./Menu/menu.html">お料理</a></li><!-- /.header-item -->
108
-
109
- <li class="header-item"> <a href="./Onsen/onsen.html">温泉</a></li><!-- /.header-item -->
110
-
111
- </ul><!-- /.header-list -->
112
-
113
- </nav><!-- /.nav -->
114
-
115
-
116
-
117
- </div>
118
-
119
- <div class="header-right">
120
-
121
- <div class="header-link " id="js-modal">
122
-
123
- <a class="calender-link js-modal-open" href="#">
124
-
125
- <!-- <img src="./img/calender.png" alt="カレンダー"> -->
126
-
127
- 宿泊予約
128
-
129
- </a>
130
-
131
- </div><!-- /.header-link -->
132
-
133
-
134
-
135
- <button type="button" id="js-humburger" class="button humburger" aria-controls="js-glabal-menu" aria-expanded="false" area-label="メニューを開閉する">
136
-
137
- <span class="line"></span ><span class="line"></span><span class="line"></span>
138
-
139
- </button>
140
-
141
- </div><!-- /.header-right -->
142
-
143
- </div><!-- /.header-inner -->
144
-
145
- </header><!-- /.header -->
146
-
147
-
148
-
149
- <section class="fv">
150
-
151
- <ul class="slider">
152
-
153
- <li><img src="./img/mainbg01.jpg" alt="1枚目"></li>
154
-
155
- <li><img src="./img/mainbg02.jpg" alt="2枚目"></li>
156
-
157
- <li><img src="./img/mainbg03.jpg" alt="3枚目"></li>
158
-
159
- </ul>
160
-
161
- <p class="fv-txt1">頑 張 る 人 の</p><!-- /.fv-txt -->
162
-
163
- <p class="fv-txt2">頑 張 ら な い 時 間</p><!-- /.fv-txt2 -->
164
-
165
- </section><!-- /.fv -->
166
-
167
-
168
-
169
- <script src="js/jquery-3.6.0.min.js"></script>
170
-
171
- <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
172
-
173
- <!-- 日本語の言語ファイル -->
174
-
175
- <script>flatpickr("#flatpickr",{locale:"ja"});</script>
176
-
177
- <script src="js/script.js"></script>
178
-
179
- </body>
180
-
181
- </html>
39
+ [コード](https://jsfiddle.net/take0844/547j90g6/4/)
40
+
41
+
42
+
43
+ ※字数制限により、一部HTML,cssを書きました。
44
+
45
+ 何卒宜しくお願い致します。
46
+
47
+
48
+
49
+ ```CSS
50
+
51
+ .header {
52
+
53
+ position: fixed;
54
+
55
+ top: 0;
56
+
57
+ z-index: 999;
58
+
59
+ width: 100%;
60
+
61
+ max-height: 80px;
62
+
63
+ background-color: transparent;
64
+
65
+ display: -webkit-box;
66
+
67
+ display: -webkit-flex;
68
+
69
+ display: -ms-flexbox;
70
+
71
+ display: flex;
72
+
73
+ -webkit-box-pack: justify;
74
+
75
+ -webkit-justify-content: space-between;
76
+
77
+ -ms-flex-pack: justify;
78
+
79
+ justify-content: space-between;
80
+
81
+ padding: 10px 20px;
82
+
83
+ }
84
+
85
+
86
+
87
+ @media screen and (min-width: 600px) and (max-width: 1179px) {
88
+
89
+ .header {
90
+
91
+ position: fixed;
92
+
93
+ top: 0;
94
+
95
+ padding: 15px 20px;
96
+
97
+ }
98
+
99
+ }
100
+
101
+
102
+
103
+ @media screen and (max-width: 599px) {
104
+
105
+ .header {
106
+
107
+ position: fixed;
108
+
109
+ top: 0;
110
+
111
+ padding: 8px 10px;
112
+
113
+ max-height: 60px;
114
+
115
+ }
116
+
117
+ }
118
+
119
+
120
+
121
+ .header-inner {
122
+
123
+ max-width: 1880px;
124
+
125
+ width: 100%;
126
+
127
+ display: -webkit-box;
128
+
129
+ display: -webkit-flex;
130
+
131
+ display: -ms-flexbox;
132
+
133
+ display: flex;
134
+
135
+ -webkit-box-align: center;
136
+
137
+ -webkit-align-items: center;
138
+
139
+ -ms-flex-align: center;
140
+
141
+ align-items: center;
142
+
143
+ margin: 0 auto;
144
+
145
+ box-sizing: border-box;
146
+
147
+ -webkit-box-sizing: border-box;
148
+
149
+ }
150
+
151
+
152
+
153
+ .header-left {
154
+
155
+ display: -webkit-box;
156
+
157
+ display: -webkit-flex;
158
+
159
+ display: -ms-flexbox;
160
+
161
+ display: flex;
162
+
163
+ -webkit-box-pack: left;
164
+
165
+ -webkit-justify-content: left;
166
+
167
+ -ms-flex-pack: left;
168
+
169
+ justify-content: left;
170
+
171
+ -webkit-box-align: center;
172
+
173
+ -webkit-align-items: center;
174
+
175
+ -ms-flex-align: center;
176
+
177
+ align-items: center;
178
+
179
+ }
180
+
181
+
182
+
183
+ .header-left h1 {
184
+
185
+ display: block;
186
+
187
+ }
188
+
189
+
190
+
191
+ .header-left h1 .logo img {
192
+
193
+ display: block;
194
+
195
+ width: 130px;
196
+
197
+ height: 130px;
198
+
199
+ margin: 20px 120px 20px 20px;
200
+
201
+ }
202
+
203
+
204
+
205
+ .header-left .nav {
206
+
207
+ display: -webkit-box;
208
+
209
+ display: -webkit-flex;
210
+
211
+ display: -ms-flexbox;
212
+
213
+ display: flex;
214
+
215
+ -webkit-box-pack: justify;
216
+
217
+ -webkit-justify-content: space-between;
218
+
219
+ -ms-flex-pack: justify;
220
+
221
+ justify-content: space-between;
222
+
223
+ -webkit-box-align: center;
224
+
225
+ -webkit-align-items: center;
226
+
227
+ -ms-flex-align: center;
228
+
229
+ align-items: center;
230
+
231
+ margin-left: 120px;
232
+
233
+ /* @include tb {
234
+
235
+ display: none;
236
+
237
+ } */
238
+
239
+ /* @include sp{
240
+
241
+ right: -75%;
242
+
243
+ } */
244
+
245
+ }
246
+
247
+
248
+
249
+ @media screen and (min-width: 600px) and (max-width: 1179px) {
250
+
251
+ .header-left .nav {
252
+
253
+ top: 80px;
254
+
255
+ position: fixed;
256
+
257
+ top: 150px;
258
+
259
+ right: 0;
260
+
261
+ z-index: 10;
262
+
263
+ overflow: hidden;
264
+
265
+ width: 16.25rem;
266
+
267
+ background-color: #000;
268
+
269
+ width: 50%;
270
+
271
+ height: 60vh;
272
+
273
+ -webkit-transform: translate(550px);
274
+
275
+ transform: translate(550px);
276
+
277
+ -webkit-transition: .5s;
278
+
279
+ transition: .5s;
280
+
281
+ }
282
+
283
+ }
284
+
285
+
286
+
287
+ @media screen and (max-width: 599px) {
288
+
289
+ .header-left .nav {
290
+
291
+ top: 60px;
292
+
293
+ position: fixed;
294
+
295
+ z-index: 2;
296
+
297
+ overflow: hidden;
298
+
299
+ width: 16.25rem;
300
+
301
+ background-color: rgba(0, 0, 0, 0.9);
302
+
303
+ width: 75%;
304
+
305
+ -webkit-transition: margin-left .5s;
306
+
307
+ transition: margin-left .5s;
308
+
309
+ }
310
+
311
+ }
312
+
313
+
314
+
315
+ .header-left .nav .header-list {
316
+
317
+ display: -webkit-box;
318
+
319
+ display: -webkit-flex;
320
+
321
+ display: -ms-flexbox;
322
+
323
+ display: flex;
324
+
325
+ -webkit-box-align: center;
326
+
327
+ -webkit-align-items: center;
328
+
329
+ -ms-flex-align: center;
330
+
331
+ align-items: center;
332
+
333
+ padding-top: 20px;
334
+
335
+ padding-bottom: 20px;
336
+
337
+ }
338
+
339
+
340
+
341
+ .header-left .nav .header-list .header-item {
342
+
343
+ color: #fff;
344
+
345
+ }
346
+
347
+
348
+
349
+ @media screen and (max-width: 599px) {
350
+
351
+ .header-left .nav .header-list .header-item {
352
+
353
+ padding: 20px;
354
+
355
+ font-size: 2rem;
356
+
357
+ }
358
+
359
+ }
360
+
361
+
362
+
363
+ .header-left .nav .header-list .header-item + .header-item {
364
+
365
+ padding-left: 30px;
366
+
367
+ }
368
+
369
+
370
+
371
+ .header-left .nav .header-list .header-item > a {
372
+
373
+ color: #fff;
374
+
375
+ display: inline-block;
376
+
377
+ -webkit-transition: .3s;
378
+
379
+ transition: .3s;
380
+
381
+ /* 0.3秒で拡大までの時間 */
382
+
383
+ }
384
+
385
+
386
+
387
+ .header-left .drawer-nav_active {
388
+
389
+ -webkit-transform: translateZ(0);
390
+
391
+ transform: translateZ(0);
392
+
393
+ }
394
+
395
+
396
+
397
+ .header-right {
398
+
399
+ margin-left: auto;
400
+
401
+ }
402
+
403
+
404
+
405
+ @media screen and (max-width: 599px) {
406
+
407
+ .header-right {
408
+
409
+ margin-left: 20px;
410
+
411
+ }
412
+
413
+ }
414
+
415
+
416
+
417
+ .header-right .header-link {
418
+
419
+ /* height: calc(54/80*100%);
420
+
421
+ background-color: $link-color;
422
+
423
+ border-radius: 3px;
424
+
425
+ padding: 15px 35px;
426
+
427
+ display: flex;
428
+
429
+ justify-content: flex-end;
430
+
431
+ align-items: center; */
432
+
433
+ }
434
+
435
+
436
+
437
+ @media screen and (min-width: 600px) and (max-width: 1179px) {
438
+
439
+ .header-right .header-link {
440
+
441
+ margin-left: auto;
442
+
443
+ }
444
+
445
+ }
446
+
447
+
448
+
449
+ .header-right .header-link .calender-link {
450
+
451
+ display: block;
452
+
453
+ background-color: #978F10;
454
+
455
+ text-decoration: none;
456
+
457
+ font-weight: bold;
458
+
459
+ -webkit-box-align: center;
460
+
461
+ -webkit-align-items: center;
462
+
463
+ -ms-flex-align: center;
464
+
465
+ align-items: center;
466
+
467
+ text-align: center;
468
+
469
+ color: #fff;
470
+
471
+ padding: 10px 37px;
472
+
473
+ font-size: 1.6rem;
474
+
475
+ -webkit-transition: .3s;
476
+
477
+ transition: .3s;
478
+
479
+ }
480
+
481
+
482
+
483
+ @media screen and (min-width: 600px) and (max-width: 1179px) {
484
+
485
+ .header-right .header-link .calender-link {
486
+
487
+ margin-right: 100px;
488
+
489
+ }
490
+
491
+ }
492
+
493
+
494
+
495
+ @media screen and (max-width: 599px) {
496
+
497
+ .header-right .header-link .calender-link {
498
+
499
+ padding: 8px 16px;
500
+
501
+ font-size: 1.4rem;
502
+
503
+ }
504
+
505
+ }
506
+
507
+
508
+
509
+ .header-right .header-link .calender-link::before {
510
+
511
+ content: "";
512
+
513
+ display: inline-block;
514
+
515
+ margin: -3px 5px 0 0;
516
+
517
+ background: url(../../img/calender.png) no-repeat;
518
+
519
+ background-size: contain;
520
+
521
+ vertical-align: middle;
522
+
523
+ width: 22px;
524
+
525
+ height: 22px;
526
+
527
+ }
528
+
529
+
530
+
531
+ .header-right .header-link .calender-link:hover {
532
+
533
+ background-color: #000;
534
+
535
+ }
536
+
537
+
538
+
539
+ /* .nav-wrapper{
540
+
541
+ height: 100%;
542
+
543
+ overflow-x: hidden;
544
+
545
+ position: relative;
546
+
547
+ } */
548
+
549
+ .overlay {
550
+
551
+ content: "";
552
+
553
+ display: block;
554
+
555
+ width: 0;
556
+
557
+ height: 0;
558
+
559
+ background-color: rgba(0, 0, 0, 0.5);
560
+
561
+ position: absolute;
562
+
563
+ top: 0;
564
+
565
+ left: 0;
566
+
567
+ z-index: 2;
568
+
569
+ opacity: 0;
570
+
571
+ -webkit-transition: opacity .5s;
572
+
573
+ transition: opacity .5s;
574
+
575
+ }
576
+
577
+
578
+
579
+ .overlay._open {
580
+
581
+ width: 100%;
582
+
583
+ height: 100%;
584
+
585
+ opacity: 1;
586
+
587
+ }
588
+
589
+
590
+
591
+ .modal {
592
+
593
+ display: none;
594
+
595
+ height: 100%;
596
+
597
+ position: fixed;
598
+
599
+ top: 0;
600
+
601
+ left: 0;
602
+
603
+ width: 100%;
604
+
605
+ z-index: 3;
606
+
607
+ }
608
+
609
+
610
+
611
+ .js-modal {
612
+
613
+ /* display: block;
614
+
615
+ width: calc(550 /1920*100%);
616
+
617
+ height: calc(600/1080*100%);
618
+
619
+ background-color: #fff;
620
+
621
+ position: absolute;
622
+
623
+ top: 50%;
624
+
625
+ left: 50%;
626
+
627
+ margin-right: 20px;
628
+
629
+ border: 1px solid #707070;
630
+
631
+ transform: translate(-50%,-50%);
632
+
633
+ z-index: 100; */
634
+
635
+ }
636
+
637
+
638
+
639
+ .js-modal .modal__bg {
640
+
641
+ background: rgba(0, 0, 0, 0.6);
642
+
643
+ height: 100%;
644
+
645
+ position: absolute;
646
+
647
+ width: 100%;
648
+
649
+ }
650
+
651
+
652
+
653
+ .js-modal .js-modal-content {
654
+
655
+ background: #fff;
656
+
657
+ padding: 40px;
658
+
659
+ position: absolute;
660
+
661
+ top: 50%;
662
+
663
+ left: 50%;
664
+
665
+ -webkit-transform: translate(-50%, -50%);
666
+
667
+ transform: translate(-50%, -50%);
668
+
669
+ width: 60%;
670
+
671
+ position: relative;
672
+
673
+ }
674
+
675
+
676
+
677
+ @media screen and (max-width: 599px) {
678
+
679
+ .js-modal .js-modal-content {
680
+
681
+ width: 95%;
682
+
683
+ padding: 20px;
684
+
685
+ }
686
+
687
+ }
688
+
689
+
690
+
691
+ @media screen and (min-width: 1180px) {
692
+
693
+ .js-modal .js-modal-content {
694
+
695
+ width: 28%;
696
+
697
+ min-width: 550px;
698
+
699
+ padding: 20px 60px 90px 60px;
700
+
701
+ }
702
+
703
+ }
704
+
705
+
706
+
707
+ .form-inner .form_img {
708
+
709
+ width: 18px;
710
+
711
+ height: 18px;
712
+
713
+ }
714
+
715
+
716
+
717
+ .form-inner h2 {
718
+
719
+ font-size: 2rem;
720
+
721
+ text-align: center;
722
+
723
+ padding: 10px;
724
+
725
+ }
726
+
727
+
728
+
729
+ .form {
730
+
731
+ margin-top: 28px;
732
+
733
+ }
734
+
735
+
736
+
737
+ .form-list .form-item input {
738
+
739
+ border: 1px solid #E7E7E7;
740
+
741
+ padding: 0 10px;
742
+
743
+ width: 100%;
744
+
745
+ line-height: 1;
746
+
747
+ color: #797878;
748
+
749
+ height: 32px;
750
+
751
+ margin-top: 10px;
752
+
753
+ }
754
+
755
+
756
+
757
+ .form-list .form-item select {
758
+
759
+ border: 1px solid #E7E7E7;
760
+
761
+ padding: 0 10px;
762
+
763
+ width: 100%;
764
+
765
+ line-height: 1;
766
+
767
+ color: #797878;
768
+
769
+ height: 32px;
770
+
771
+ margin-top: 10px;
772
+
773
+ }
774
+
775
+
776
+
777
+ .form-close {
778
+
779
+ text-align: center;
780
+
781
+ }
782
+
783
+
784
+
785
+ .form-close > a {
786
+
787
+ display: inline-block;
788
+
789
+ width: 198px;
790
+
791
+ margin-top: 64px;
792
+
793
+ border: 1px solid #000;
794
+
795
+ text-align: center;
796
+
797
+ padding: 13px;
798
+
799
+ line-height: 1;
800
+
801
+ -webkit-transition: .3s;
802
+
803
+ transition: .3s;
804
+
805
+ }
806
+
807
+
808
+
809
+ .fv {
810
+
811
+ position: relative;
812
+
813
+ overflow: hidden;
814
+
815
+ }
816
+
817
+
818
+
819
+ .wrap {
820
+
821
+ padding: 16px;
822
+
823
+ }
824
+
825
+
826
+
827
+ #slide_wrap {
828
+
829
+ position: relative;
830
+
831
+ overflow: hidden;
832
+
833
+ }
834
+
835
+
836
+
837
+ #slide_wrap .slide_item {
838
+
839
+ opacity: 0;
840
+
841
+ -webkit-transform: scale(1);
842
+
843
+ transform: scale(1);
844
+
845
+ -webkit-transition: opacity 2s linear, -webkit-transform 7.5s linear;
846
+
847
+ transition: opacity 2s linear, -webkit-transform 7.5s linear;
848
+
849
+ transition: opacity 2s linear, transform 7.5s linear;
850
+
851
+ transition: opacity 2s linear, transform 7.5s linear, -webkit-transform 7.5s linear;
852
+
853
+ position: relative;
854
+
855
+ }
856
+
857
+
858
+
859
+ #slide_wrap .slide_item:not(:first-child) {
860
+
861
+ position: absolute;
862
+
863
+ top: 0;
864
+
865
+ left: 0;
866
+
867
+ }
868
+
869
+
870
+
871
+ @media screen and (min-width: 600px) and (max-width: 1179px) {
872
+
873
+ #slide_wrap .slide_item:not(:first-child) {
874
+
875
+ position: absolute;
876
+
877
+ top: 0;
878
+
879
+ left: 0;
880
+
881
+ }
882
+
883
+ }
884
+
885
+
886
+
887
+ #slide_wrap .slide_item.show {
888
+
889
+ opacity: 1;
890
+
891
+ }
892
+
893
+
894
+
895
+ #slide_wrap .slide_item.zoom {
896
+
897
+ -webkit-transform: scale(1.1);
898
+
899
+ transform: scale(1.1);
900
+
901
+ }
902
+
903
+
904
+
905
+ #slide_wrap .slide_item img {
906
+
907
+ display: block;
908
+
909
+ }
910
+
911
+
912
+
913
+ .fv-txt1 {
914
+
915
+ display: block;
916
+
917
+ position: absolute;
918
+
919
+ top: 26%;
920
+
921
+ left: 71%;
922
+
923
+ -webkit-writing-mode: vertical-rl;
924
+
925
+ -ms-writing-mode: tb-rl;
926
+
927
+ writing-mode: vertical-rl;
928
+
929
+ font-size: 3.4rem;
930
+
931
+ color: #fff;
932
+
933
+ padding-left: 51px;
934
+
935
+ line-height: 6rem;
936
+
937
+ }
182
938
 
183
939
  ```
184
-
185
-
186
-
187
- ```CSS
188
-
189
-
190
-
191
- .header {
192
-
193
- position: fixed;
194
-
195
- top: 0;
196
-
197
- z-index: 999;
198
-
199
- width: 100%;
200
-
201
- max-height: 80px;
202
-
203
- background-color: transparent;
204
-
205
- display: -webkit-box;
206
-
207
- display: -webkit-flex;
208
-
209
- display: -ms-flexbox;
210
-
211
- display: flex;
212
-
213
- -webkit-box-pack: justify;
214
-
215
- -webkit-justify-content: space-between;
216
-
217
- -ms-flex-pack: justify;
218
-
219
- justify-content: space-between;
220
-
221
- padding: 10px 20px;
222
-
223
- }
224
-
225
-
226
-
227
- @media screen and (min-width: 600px) and (max-width: 1179px) {
228
-
229
- .header {
230
-
231
- position: fixed;
232
-
233
- top: 0;
234
-
235
- padding: 15px 20px;
236
-
237
- }
238
-
239
- }
240
-
241
-
242
-
243
- @media screen and (max-width: 599px) {
244
-
245
- .header {
246
-
247
- position: fixed;
248
-
249
- top: 0;
250
-
251
- padding: 8px 10px;
252
-
253
- max-height: 60px;
254
-
255
- }
256
-
257
- }
258
-
259
-
260
-
261
- .header-inner {
262
-
263
- max-width: 1880px;
264
-
265
- width: 100%;
266
-
267
- display: -webkit-box;
268
-
269
- display: -webkit-flex;
270
-
271
- display: -ms-flexbox;
272
-
273
- display: flex;
274
-
275
- -webkit-box-align: center;
276
-
277
- -webkit-align-items: center;
278
-
279
- -ms-flex-align: center;
280
-
281
- align-items: center;
282
-
283
- margin: 0 auto;
284
-
285
- box-sizing: border-box;
286
-
287
- -webkit-box-sizing: border-box;
288
-
289
- }
290
-
291
-
292
-
293
- .header-left {
294
-
295
- display: -webkit-box;
296
-
297
- display: -webkit-flex;
298
-
299
- display: -ms-flexbox;
300
-
301
- display: flex;
302
-
303
- -webkit-box-pack: left;
304
-
305
- -webkit-justify-content: left;
306
-
307
- -ms-flex-pack: left;
308
-
309
- justify-content: left;
310
-
311
- -webkit-box-align: center;
312
-
313
- -webkit-align-items: center;
314
-
315
- -ms-flex-align: center;
316
-
317
- align-items: center;
318
-
319
- }
320
-
321
-
322
-
323
- .header-left h1 {
324
-
325
- display: block;
326
-
327
- }
328
-
329
-
330
-
331
- .header-left h1 .logo img {
332
-
333
- display: block;
334
-
335
- width: 130px;
336
-
337
- height: 130px;
338
-
339
- margin: 20px 120px 20px 20px;
340
-
341
- }
342
-
343
-
344
-
345
- .header-left .nav {
346
-
347
- display: -webkit-box;
348
-
349
- display: -webkit-flex;
350
-
351
- display: -ms-flexbox;
352
-
353
- display: flex;
354
-
355
- -webkit-box-pack: justify;
356
-
357
- -webkit-justify-content: space-between;
358
-
359
- -ms-flex-pack: justify;
360
-
361
- justify-content: space-between;
362
-
363
- -webkit-box-align: center;
364
-
365
- -webkit-align-items: center;
366
-
367
- -ms-flex-align: center;
368
-
369
- align-items: center;
370
-
371
- margin-left: 120px;
372
-
373
- /* @include tb {
374
-
375
- display: none;
376
-
377
- } */
378
-
379
- /* @include sp{
380
-
381
- right: -75%;
382
-
383
- } */
384
-
385
- }
386
-
387
-
388
-
389
- .header-left .nav .header-list {
390
-
391
- display: -webkit-box;
392
-
393
- display: -webkit-flex;
394
-
395
- display: -ms-flexbox;
396
-
397
- display: flex;
398
-
399
- -webkit-box-align: center;
400
-
401
- -webkit-align-items: center;
402
-
403
- -ms-flex-align: center;
404
-
405
- align-items: center;
406
-
407
- padding-top: 20px;
408
-
409
- padding-bottom: 20px;
410
-
411
- }
412
-
413
-
414
-
415
- .header-left .nav .header-list .header-item {
416
-
417
- color: #fff;
418
-
419
- }
420
-
421
-
422
-
423
- @media screen and (max-width: 599px) {
424
-
425
- .header-left .nav .header-list .header-item {
426
-
427
- padding: 20px;
428
-
429
- font-size: 2rem;
430
-
431
- }
432
-
433
- }
434
-
435
-
436
-
437
- .header-left .nav .header-list .header-item + .header-item {
438
-
439
- padding-left: 30px;
440
-
441
- }
442
-
443
-
444
-
445
- .header-left .nav .header-list .header-item > a {
446
-
447
- color: #fff;
448
-
449
- display: inline-block;
450
-
451
- -webkit-transition: .3s;
452
-
453
- transition: .3s;
454
-
455
- /* 0.3秒で拡大までの時間 */
456
-
457
- }
458
-
459
-
460
-
461
- @media screen and (min-width: 600px) and (max-width: 1179px) {
462
-
463
- .header-left .nav-open {
464
-
465
- top: 80px;
466
-
467
- position: fixed;
468
-
469
- top: 150px;
470
-
471
- right: 0;
472
-
473
- right: -50%;
474
-
475
- z-index: 2;
476
-
477
- overflow: hidden;
478
-
479
- width: 16.25rem;
480
-
481
- background-color: #000;
482
-
483
- width: 50%;
484
-
485
- height: 60vh;
486
-
487
- -webkit-transition: margin-left .5s;
488
-
489
- transition: margin-left .5s;
490
-
491
- }
492
-
493
- }
494
-
495
-
496
-
497
- @media screen and (max-width: 599px) {
498
-
499
- .header-left .nav-open {
500
-
501
- top: 60px;
502
-
503
- position: fixed;
504
-
505
- z-index: 2;
506
-
507
- overflow: hidden;
508
-
509
- width: 16.25rem;
510
-
511
- background-color: rgba(0, 0, 0, 0.9);
512
-
513
- width: 75%;
514
-
515
- -webkit-transition: margin-left .5s;
516
-
517
- transition: margin-left .5s;
518
-
519
- }
520
-
521
- }
522
-
523
-
524
-
525
- .header-left .drawer-nav_active {
526
-
527
- -webkit-transform: translateZ(0);
528
-
529
- transform: translateZ(0);
530
-
531
- }
532
-
533
-
534
-
535
- .header-right {
536
-
537
- margin-left: auto;
538
-
539
- }
540
-
541
-
542
-
543
- @media screen and (max-width: 599px) {
544
-
545
- .header-right {
546
-
547
- margin-left: 20px;
548
-
549
- }
550
-
551
- }
552
-
553
-
554
-
555
- .header-right .header-link {
556
-
557
- /* height: calc(54/80*100%);
558
-
559
- background-color: $link-color;
560
-
561
- border-radius: 3px;
562
-
563
- padding: 15px 35px;
564
-
565
- display: flex;
566
-
567
- justify-content: flex-end;
568
-
569
- align-items: center; */
570
-
571
- }
572
-
573
-
574
-
575
- @media screen and (min-width: 600px) and (max-width: 1179px) {
576
-
577
- .header-right .header-link {
578
-
579
- margin-left: auto;
580
-
581
- }
582
-
583
- }
584
-
585
-
586
-
587
- .header-right .header-link .calender-link {
588
-
589
- display: block;
590
-
591
- background-color: #978F10;
592
-
593
- text-decoration: none;
594
-
595
- font-weight: bold;
596
-
597
- -webkit-box-align: center;
598
-
599
- -webkit-align-items: center;
600
-
601
- -ms-flex-align: center;
602
-
603
- align-items: center;
604
-
605
- text-align: center;
606
-
607
- color: #fff;
608
-
609
- padding: 10px 37px;
610
-
611
- font-size: 1.6rem;
612
-
613
- -webkit-transition: .3s;
614
-
615
- transition: .3s;
616
-
617
- }
618
-
619
-
620
-
621
- @media screen and (min-width: 600px) and (max-width: 1179px) {
622
-
623
- .header-right .header-link .calender-link {
624
-
625
- margin-right: 100px;
626
-
627
- }
628
-
629
- }
630
-
631
-
632
-
633
- @media screen and (max-width: 599px) {
634
-
635
- .header-right .header-link .calender-link {
636
-
637
- padding: 8px 16px;
638
-
639
- font-size: 1.4rem;
640
-
641
- }
642
-
643
- }
644
-
645
-
646
-
647
- .header-right .header-link .calender-link::before {
648
-
649
- content: "";
650
-
651
- display: inline-block;
652
-
653
- margin: -3px 5px 0 0;
654
-
655
- background: url(../../img/calender.png) no-repeat;
656
-
657
- background-size: contain;
658
-
659
- vertical-align: middle;
660
-
661
- width: 22px;
662
-
663
- height: 22px;
664
-
665
- }
666
-
667
-
668
-
669
- .header-right .header-link .calender-link:hover {
670
-
671
- background-color: #000;
672
-
673
- }
674
-
675
-
676
-
677
- ```

2

修正いたしました

2021/10/29 07:11

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
File without changes

1

2021/10/28 11:09

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
@@ -144,6 +144,28 @@
144
144
 
145
145
  </header><!-- /.header -->
146
146
 
147
+
148
+
149
+ <section class="fv">
150
+
151
+ <ul class="slider">
152
+
153
+ <li><img src="./img/mainbg01.jpg" alt="1枚目"></li>
154
+
155
+ <li><img src="./img/mainbg02.jpg" alt="2枚目"></li>
156
+
157
+ <li><img src="./img/mainbg03.jpg" alt="3枚目"></li>
158
+
159
+ </ul>
160
+
161
+ <p class="fv-txt1">頑 張 る 人 の</p><!-- /.fv-txt -->
162
+
163
+ <p class="fv-txt2">頑 張 ら な い 時 間</p><!-- /.fv-txt2 -->
164
+
165
+ </section><!-- /.fv -->
166
+
167
+
168
+
147
169
  <script src="js/jquery-3.6.0.min.js"></script>
148
170
 
149
171
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>