質問編集履歴

3

bootstrapタグを追加しました。

2020/06/16 15:56

投稿

aya_datzii
aya_datzii

スコア9

test CHANGED
File without changes
test CHANGED
File without changes

2

コードを追加しました。よろしくお願いいたします。

2020/06/16 15:56

投稿

aya_datzii
aya_datzii

スコア9

test CHANGED
File without changes
test CHANGED
@@ -25,3 +25,847 @@
25
25
  Chromeの問題なのかと思うのですが、解決策のアイデアをいただけますと幸いです。
26
26
 
27
27
  よろしくおねがいいたします。
28
+
29
+
30
+
31
+
32
+
33
+ ```HTML
34
+
35
+ <!DOCTYPE html>
36
+
37
+ <html lang="en">
38
+
39
+ <head>
40
+
41
+   省略
42
+
43
+ </head>
44
+
45
+ <body>
46
+
47
+ <!--Navigaton-->
48
+
49
+ <nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top py-3 px-4">
50
+
51
+ <div class="container-fluid">
52
+
53
+ <a class="navbar-brand" href="#"><img src="../img/logo.png" alt="logo"></a>
54
+
55
+ <!--Language Dropdown-->
56
+
57
+ <ul class="nav navbar-nav mr-auto languages">
58
+
59
+ <li class="nav-item dropdown">
60
+
61
+ <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
62
+
63
+ Language
64
+
65
+ </a>
66
+
67
+ <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown01">
68
+
69
+ <a class="dropdown-item active" href="#">English</a>
70
+
71
+ <a class="dropdown-item" href="#">簡体中文</a>
72
+
73
+
74
+
75
+ </div>
76
+
77
+ </li>
78
+
79
+ </ul>
80
+
81
+ <!--Menu-->
82
+
83
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
84
+
85
+ <span class="navbar-toggler-icon"></span>
86
+
87
+ </button>
88
+
89
+ <div class="collapse navbar-collapse" id="navbarResponsive">
90
+
91
+ <ul class="navbar-nav ml-auto">
92
+
93
+ <li class="nav-item">
94
+
95
+ <a class="nav-link" href="#">Home</a>
96
+
97
+ </li>
98
+
99
+ <li class="nav-item">
100
+
101
+ <a class="nav-link" href="#">Service</a>
102
+
103
+ </li>
104
+
105
+ <li class="nav-item">
106
+
107
+ <a class="nav-link" href="#">About</a>
108
+
109
+ </li>
110
+
111
+ <li class="nav-item">
112
+
113
+ <a class="nav-link" href="#">Contact</a>
114
+
115
+ </li>
116
+
117
+ </ul>
118
+
119
+ </div>
120
+
121
+ </div>
122
+
123
+ </nav>
124
+
125
+ <!--Top-->
126
+
127
+ <div class="jumbotron-fluid message">
128
+
129
+ <div class="container top text-center">
130
+
131
+ <h1>Message 1</h1>
132
+
133
+ <h4>message message message</h4>
134
+
135
+ </div>
136
+
137
+ </div>
138
+
139
+ <!--Services-->
140
+
141
+ <div class="container-fluid service-heading padding">
142
+
143
+ <div class="row">
144
+
145
+ <div class="col-12">
146
+
147
+ <h1>Title</h1>
148
+
149
+ <h1>title cont.</h1>
150
+
151
+ </div>
152
+
153
+ </div>
154
+
155
+ <div class="row">
156
+
157
+ <div class="col-12">
158
+
159
+ <h2>Service service</h2>
160
+
161
+ </div>
162
+
163
+ </div>
164
+
165
+ <div class="row services wow fadeIn" data-wow-delay="0.3s">
166
+
167
+ <div class="col-6 col-md-4">
168
+
169
+     略
170
+
171
+ </div>
172
+
173
+ <div class="col-6 col-md-4">
174
+
175
+     略
176
+
177
+ </div>
178
+
179
+ <div class="col-6 col-md-4">
180
+
181
+     略
182
+
183
+ </div>
184
+
185
+ <div class="col-6 col-md-4">
186
+
187
+      略
188
+
189
+ </div>
190
+
191
+ <div class="col-6 col-md-4">
192
+
193
+      略
194
+
195
+ </div>
196
+
197
+ <div class="col-6 col-md-4">
198
+
199
+    略
200
+
201
+ </div>
202
+
203
+ </div>
204
+
205
+ </div>
206
+
207
+ <!--Benefits-->
208
+
209
+ <div class="container-fluid padding blue-bg">
210
+
211
+ <div class="row benefits">
212
+
213
+ <div class="col-sm-12 col-md-6 benefit wow fadeIn" data-wow-delay="0.2s">
214
+
215
+    略
216
+
217
+ </div>
218
+
219
+ <div class="col-sm-12 col-md-6 benefit wow fadeIn" data-wow-delay="0.3s">
220
+
221
+    略
222
+
223
+ </div>
224
+
225
+ <div class="col-sm-12 col-md-6 benefit wow fadeIn" data-wow-delay="0.4s">
226
+
227
+     略
228
+
229
+ </div>
230
+
231
+ <div class="col-sm-12 col-md-6 benefit wow fadeIn" data-wow-delay="0.5s">
232
+
233
+    略
234
+
235
+ </div>
236
+
237
+ </div>
238
+
239
+ </div>
240
+
241
+ <!--Experiences-->
242
+
243
+ <div class="container-fluid padding experience">
244
+
245
+ <div class="row">
246
+
247
+ <div class="col-12">
248
+
249
+ <h2>Our Experiences</h2>
250
+
251
+ <h4>July 2017 - June 2019</h4>
252
+
253
+ </div>
254
+
255
+ </div>
256
+
257
+ <div class="row mt-5 text-center" id="counter-block">
258
+
259
+ <div class="col-sm-12 col-md-4 exp">
260
+
261
+ <h5>Experience 1</h5>
262
+
263
+ <div class="counts"><h4><span class="loaded"></span> m&sup3;</h4></div>
264
+
265
+ <p>Sentence sentence sentence</p>
266
+
267
+ </div>
268
+
269
+ <div class="col-sm-12 col-md-4 exp">
270
+
271
+ <h5>Experience 2</h5>
272
+
273
+ <div class="counts"><h4><span class="imported"></span> items</h4></div>
274
+
275
+ <p>Sentence sentence sentence</p>
276
+
277
+ </div>
278
+
279
+ <div class="col-sm-12 col-md-4 exp">
280
+
281
+ <h5>Experience 3</h5>
282
+
283
+ <div class="counts"><h4><span class="custom"></span> cases</h4></div>
284
+
285
+ <p>Sentence sentence sentence</p>
286
+
287
+ </div>
288
+
289
+ </div>
290
+
291
+ </div>
292
+
293
+ <!--About-->
294
+
295
+ <div class="container-fluid padding" id="about">
296
+
297
+ <div class="row">
298
+
299
+ <div class="col-12">
300
+
301
+ <h4>About Us
302
+
303
+ <br>
304
+
305
+ <br><span>Sentence sentence sentence</span></h4>
306
+
307
+ <p>Sentence sentence sentence</p>
308
+
309
+ </div>
310
+
311
+ <div class="col-12">
312
+
313
+ <table class="table table-dark table-borderless">
314
+
315
+ <thead>
316
+
317
+ <tr>
318
+
319
+ <th scope="col"></th>
320
+
321
+ <th scope="col"></th>
322
+
323
+ </tr>
324
+
325
+ </thead>
326
+
327
+ <tbody>
328
+
329
+ 省略
330
+
331
+ </tbody>
332
+
333
+ </table>
334
+
335
+ </div>
336
+
337
+ </div>
338
+
339
+ <div class="row text-center">
340
+
341
+ <div class="col-12">
342
+
343
+ <a class="btn btn-primary btn-lg my-3 wow fadeInRight" href="#" role="button">Contact Us</a>
344
+
345
+ </div>
346
+
347
+ </div>
348
+
349
+ </div>
350
+
351
+ <!--Footer-->
352
+
353
+ <footer>
354
+
355
+ <div class="container-fluid">
356
+
357
+ <div class="row">
358
+
359
+ <div class="col-4 col-md-3 text-center">
360
+
361
+ <img src="../img/logo.png" alt="logo">
362
+
363
+ </div>
364
+
365
+ <div class="col-8 col-md-5">
366
+
367
+ <div class="info">
368
+
369
+ <h4>Company</h4>
370
+
371
+ <p>Address</p>
372
+
373
+ <div class="contact-info">
374
+
375
+ <h4><i class="fas fa-phone"></i>&nbsp;00-0000-0000</h4>
376
+
377
+ <h4><i class="fas fa-envelope"></i>&nbsp;hogehoge@com</h4>
378
+
379
+ </div>
380
+
381
+ </div>
382
+
383
+ </div>
384
+
385
+ <div class="col-12 col-md-4 text-center">
386
+
387
+ <ul class="footer-menu">
388
+
389
+         省略
390
+
391
+ </ul>
392
+
393
+ </div>
394
+
395
+ </div>
396
+
397
+ <div class="row text-center pt-3">
398
+
399
+ <div class="col-12">
400
+
401
+ <p>Copyright &copy; 2020 Company </p>
402
+
403
+ </div>
404
+
405
+ </div>
406
+
407
+ </div>
408
+
409
+ </footer>
410
+
411
+
412
+
413
+
414
+
415
+ </body>
416
+
417
+ </html>
418
+
419
+ ```
420
+
421
+
422
+
423
+
424
+
425
+ ```CSS
426
+
427
+ @charset "utf-8";
428
+
429
+ * {
430
+
431
+ margin: 0px;
432
+
433
+ padding: 0px;
434
+
435
+ }
436
+
437
+ body:lang(en) {
438
+
439
+ font-family: 'FranklinGothic URW','Avenir','Helvetica Neue','Hiragino Sans','Yu Gothic','MS PGothic','sans-serif';
440
+
441
+ }
442
+
443
+ body:lang(zh-cmn-Hans) {
444
+
445
+ font-family: "微软雅黑体", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
446
+
447
+ }
448
+
449
+ body p, body td, body dt {
450
+
451
+ font-family:"微软雅黑体", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
452
+
453
+ }
454
+
455
+ body p {
456
+
457
+ color: #5f5f5f;
458
+
459
+ }
460
+
461
+ /*General*/
462
+
463
+ h1 {
464
+
465
+ font-size: 3rem;
466
+
467
+ }
468
+
469
+ span {
470
+
471
+ font-weight: bold;
472
+
473
+ }
474
+
475
+ .padding {
476
+
477
+ padding: 4rem
478
+
479
+ }
480
+
481
+ .blue-bg {
482
+
483
+ background-color: #2A4273;
484
+
485
+ }
486
+
487
+ /*Navigation*/
488
+
489
+ .nav {
490
+
491
+ margin-top: 0;
492
+
493
+ display: block;
494
+
495
+ }
496
+
497
+ .bg-dark {
498
+
499
+ background-color: #2A4273 !important;
500
+
501
+ }
502
+
503
+ .navbar-brand {
504
+
505
+ margin-right: 0;
506
+
507
+ }
508
+
509
+ .navbar-brand img {
510
+
511
+ width: 90px;
512
+
513
+ }
514
+
515
+ .languages .nav-item {
516
+
517
+ padding-left: 2rem;
518
+
519
+ }
520
+
521
+ #navbarResponsive .nav-item {
522
+
523
+ padding-left: 3rem;
524
+
525
+ font-size: 1.3rem;
526
+
527
+ }
528
+
529
+ /*Top*/
530
+
531
+ .message {
532
+
533
+ background-image: url(../img/top-japan.jpg);
534
+
535
+ background-position: center;
536
+
537
+ background-repeat: no-repeat;
538
+
539
+ background-size: cover;
540
+
541
+ background-blend-mode:darken;
542
+
543
+ background-color: rgba(42,66,115,0.6);
544
+
545
+ margin-bottom: 0;
546
+
547
+ height: 400px;
548
+
549
+ }
550
+
551
+ .top {
552
+
553
+ color: white;
554
+
555
+ padding: 7rem 1rem;
556
+
557
+ text-shadow: 1px 1px 2px black;
558
+
559
+ }
560
+
561
+ .top h4 {
562
+
563
+ font-style: italic;
564
+
565
+ }
566
+
567
+ /*Services*/
568
+
569
+ .service-heading {
570
+
571
+ color: #2A4273;
572
+
573
+ }
574
+
575
+ .service-heading h2 {
576
+
577
+ font-style: italic;
578
+
579
+ display: inline-block;
580
+
581
+ border-bottom: solid 5px #F2D25F;
582
+
583
+ }
584
+
585
+ .services {
586
+
587
+ margin-top: 3rem;
588
+
589
+ }
590
+
591
+ .service-box {
592
+
593
+ margin: 2rem;
594
+
595
+ }
596
+
597
+ .services span {
598
+
599
+ margin-bottom: 1.5rem;
600
+
601
+ }
602
+
603
+ .circle {
604
+
605
+ border-radius: 100%;
606
+
607
+ background-color: #2A4273;
608
+
609
+ }
610
+
611
+ .icon {
612
+
613
+ display: inline-block;
614
+
615
+ text-align: center;
616
+
617
+ position: relative;
618
+
619
+ font-size: 60px;
620
+
621
+ width: 120px;
622
+
623
+ height: 120px;
624
+
625
+ }
626
+
627
+ .icon i {
628
+
629
+ color: white;
630
+
631
+ line-height: 120px;
632
+
633
+ position: relative;
634
+
635
+ z-index: 1;
636
+
637
+ }
638
+
639
+ .fas, .fab {
640
+
641
+ display: inline-block;
642
+
643
+ font: normal;
644
+
645
+ font-size: inherit;
646
+
647
+ text-rendering: auto;
648
+
649
+ }
650
+
651
+ /*Benefits*/
652
+
653
+ .benefits {
654
+
655
+ color: white;
656
+
657
+ }
658
+
659
+ .benefit-text h2, .benefit-text p {
660
+
661
+ color: white;
662
+
663
+ }
664
+
665
+ .benefit {
666
+
667
+ padding: 2rem;
668
+
669
+ }
670
+
671
+ .benefit-icon {
672
+
673
+ font-size: 60px;
674
+
675
+ width: 100px;
676
+
677
+ height: 100%;
678
+
679
+ float: left;
680
+
681
+ }
682
+
683
+ /*Experiences*/
684
+
685
+ .experience {
686
+
687
+ color: #2A4273;
688
+
689
+ }
690
+
691
+ .experience h2 {
692
+
693
+ display: inline-block;
694
+
695
+ border-bottom: solid 5px #F2D25F;
696
+
697
+ }
698
+
699
+ .experience span {
700
+
701
+ font-weight: bold;
702
+
703
+ }
704
+
705
+ .counts {
706
+
707
+ padding-top: 1.8rem;
708
+
709
+ }
710
+
711
+ .counts span {
712
+
713
+ font-size: 65px;
714
+
715
+ font-weight: bold;
716
+
717
+ font-style: italic;
718
+
719
+ }
720
+
721
+ .experience p {
722
+
723
+ color: #5F5F5F;
724
+
725
+ }
726
+
727
+ /*About*/
728
+
729
+ #about {
730
+
731
+ color: white;
732
+
733
+ background-image: url(../img/port.jpg);
734
+
735
+ background-position: center;
736
+
737
+ background-repeat: no-repeat;
738
+
739
+ background-size: cover;
740
+
741
+ background-blend-mode:darken;
742
+
743
+ background-color: rgba(42,66,115,0.75);
744
+
745
+ margin-bottom: 0;
746
+
747
+ height: 100%;
748
+
749
+ }
750
+
751
+ #about p {
752
+
753
+ color: white;
754
+
755
+ font-weight: lighter;
756
+
757
+ }
758
+
759
+ .table-dark {
760
+
761
+ background-color: rgba(0,0,0,0);
762
+
763
+ }
764
+
765
+ table a {
766
+
767
+ color: white;
768
+
769
+ }
770
+
771
+ .table th, .table td {
772
+
773
+ padding-left: 0;
774
+
775
+ }
776
+
777
+ /*button*/
778
+
779
+ .btn {
780
+
781
+ border: none;
782
+
783
+ color: #2A4273;
784
+
785
+ border-radius: 0px;
786
+
787
+ }
788
+
789
+ .btn:hover {
790
+
791
+ opacity: 0.8;
792
+
793
+ color: #2A4273;
794
+
795
+ transition: all .3s;
796
+
797
+ }
798
+
799
+ .btn-primary {
800
+
801
+ background-color: #F2D25F!important;
802
+
803
+ }
804
+
805
+ .btn-lg {
806
+
807
+ width: 15rem;
808
+
809
+ box-shadow: 0 3px 3px #00000029;
810
+
811
+ }
812
+
813
+ /*Footer*/
814
+
815
+ footer {
816
+
817
+ background-color: #323336;
818
+
819
+ padding-top: 2rem;
820
+
821
+ }
822
+
823
+ footer h4, footer p {
824
+
825
+ color: white;
826
+
827
+ }
828
+
829
+ footer h4 {
830
+
831
+ font-size: 15px;
832
+
833
+ }
834
+
835
+ footer p {
836
+
837
+ font-size: 12px;
838
+
839
+ }
840
+
841
+ .contact-info h4 {
842
+
843
+ display: inline-block;
844
+
845
+ float: left;
846
+
847
+ padding-right: 1rem;
848
+
849
+ }
850
+
851
+ footer ul {
852
+
853
+ list-style: none;
854
+
855
+ }
856
+
857
+ footer a {
858
+
859
+ color: white;
860
+
861
+ }
862
+
863
+ footer img {
864
+
865
+ width: 120px;
866
+
867
+ }
868
+
869
+
870
+
871
+ ```

1

Chromeの検証を使って見た状態を追記しました。

2020/06/16 03:32

投稿

aya_datzii
aya_datzii

スコア9

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,6 @@
1
1
  HTML, CSS(Bootstrap使用),JQueryで作っているシンプルなWebサイトなのですが、Google Chromeでみるとヘッダーの上部に少しの隙間ができてしまっています。
2
+
3
+ スクロールするとヘッダー上部の隙間から要素が見える状態です。navにはmarginは特についていません。
2
4
 
3
5
 
4
6