質問編集履歴

2

コード追加

2020/10/17 15:54

投稿

Larkiwing
Larkiwing

スコア120

test CHANGED
File without changes
test CHANGED
@@ -1,9 +1,3 @@
1
- ![イメージ説明](6fd8c0b699d5d8173b6e4736b02208e2.png)footerの部分を作っているのですが、なぜか画面幅が合いません。
2
-
3
- ちょっとだけ右にずれてしまっているのですが、何がいけないのかわかる方回答をお願いします。
4
-
5
-
6
-
7
1
  ```html
8
2
 
9
3
  <!doctype html>
@@ -18,206 +12,754 @@
18
12
 
19
13
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
20
14
 
21
-
22
-
23
15
  <!-- Bootstrap CSS -->
24
16
 
25
17
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
26
18
 
27
-
28
-
29
19
  <link rel="stylesheet" href="style.css">
30
20
 
31
- <title>Title</title>
21
+ <title>tit</title>
32
-
33
-
34
-
35
-
36
22
 
37
23
  </head>
38
24
 
39
25
  <body>
40
26
 
27
+
28
+
29
+
30
+
31
+ <div class="breadcrumb bg-white">
32
+
33
+ Home > Services > Strategy Consulting
34
+
35
+ </div>
36
+
37
+ <div class="category-title text-center">
38
+
39
+ Strategy Consulting
40
+
41
+ </div>
42
+
43
+ <div class="row mb-5">
44
+
45
+ <div class="col-lg-5 about-us">
46
+
47
+ <p class="">“Lorem ipsum dolor sit.</p>
48
+
49
+ <p>“Lorem ipsum dolor sit</p>
50
+
51
+ <p class="strategy-title">What </p>
52
+
53
+ <p class="list"> ✓ Lorem </p>
54
+
55
+ <p class="list"> ✓ Lorem </p>
56
+
57
+
58
+
59
+ </div>
60
+
61
+ <div class="col-lg-7 about-us-pic">
62
+
63
+ <div class="circle" href="~">
64
+
65
+ <span>1<br>sample</span>
66
+
67
+ </div>
68
+
69
+ </div>
70
+
71
+ </div>
72
+
41
73
  <footer class="footer m-2">
42
74
 
43
- <div class="footer-block">
44
-
45
- <div class="row">
46
-
47
- <!-- Footer Location-->
48
-
49
- <div class="col-lg-4">
50
-
51
- <p class="company-name">hogehogehogehogehogehohoge Ltd.</p>
52
-
53
- <p class="company-address">
54
-
55
- 1111 1111 1111
56
-
57
- <br />
58
-
59
- hoge hoge hoge hoge
60
-
61
- <br />
62
-
63
- hoge hogehogehoge
64
-
65
- </p>
66
-
67
- </div>
68
-
69
- <!-- Footer Logo-->
70
-
71
- <div class="col-lg-4 footer-logo">
72
-
73
- <a href="#"><img class="logo-image" src="img/logo-bottom.jpg" alt=""></a>
74
-
75
- </div>
76
-
77
- <!-- Footer About Text-->
78
-
79
- <div class="col-lg-4 company-right">
80
-
81
- <p class="company-name">© 2020 hogehoge copyright Ltd.</p>
82
-
83
- <p class="contact-details">
84
-
85
- <a href="#" class="text-dark">Email |</a>
86
-
87
- <a href="#" class="text-dark">Phone | </a>
88
-
89
- <a href="#" class="text-dark">Facebook</a> <br>
90
-
91
- <a href="#" class="text-dark">Subscribe Newsletter</a>
92
-
93
- </p>
94
-
95
- </div>
96
-
97
- </div>
98
-
99
- </div>
100
-
101
- </footer>
102
-
103
-
75
+ <div class="footer-block">
76
+
77
+ <div class="row">
78
+
79
+ <!-- Footer Location-->
80
+
81
+ <div class="col-lg-4">
82
+
83
+ <p class="company-name">company name</p>
84
+
85
+ <p class="company-address">
86
+
87
+ address
88
+
89
+ <br />
90
+
91
+ address
92
+
93
+ <br />
94
+
95
+ address
96
+
97
+ </p>
98
+
99
+ </div>
100
+
101
+ <!-- Footer Logo-->
102
+
103
+ <div class="col-lg-4 footer-logo">
104
+
105
+ <a href="#"><img class="logo-image" src="img/logo-bottom.jpg" alt=""></a>
106
+
107
+ </div>
108
+
109
+ <!-- Footer About Text-->
110
+
111
+ <div class="col-lg-4 company-right">
112
+
113
+ <p class="company-name">copy right</p>
114
+
115
+ <p class="contact-details">
116
+
117
+ <a href="#" class="text-dark">Email |</a>
118
+
119
+ <a href="#" class="text-dark">Phone | </a>
120
+
121
+ <a href="#" class="text-dark">Facebook</a> <br>
122
+
123
+ <a href="#" class="text-dark">Subscribe Newsletter</a>
124
+
125
+ </p>
126
+
127
+ </div>
128
+
129
+ </div>
130
+
131
+ </div>
132
+
133
+ </footer>
134
+
135
+ </body>
136
+
137
+ <!-- Optional JavaScript -->
138
+
139
+ <!-- jQuery first, then Popper.js, then Bootstrap JS -->
140
+
141
+ <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
142
+
143
+ <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
144
+
145
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
146
+
147
+ <script type="text/javascript" src="javascript.js"></script>
148
+
149
+ <script>
150
+
151
+ $('.navbar-nav>li>a , .dropdown-menu>a').on('click', function(){
152
+
153
+ if(this.id != 'navbarDropdown'){
154
+
155
+ $('.navbar-collapse').collapse('hide');
156
+
157
+ }
158
+
159
+ });
160
+
161
+ </script>
162
+
163
+ </body>
164
+
165
+ </html>
166
+
167
+ ```
168
+
169
+
170
+
171
+ ```CSS
172
+
173
+
174
+
175
+ .navbar {
176
+
177
+ position: relative;
178
+
179
+ z-index: 1;
180
+
181
+ }
182
+
183
+
184
+
185
+ .logo-img {
186
+
187
+ width: 15vw;
188
+
189
+ }
190
+
191
+ /* ロゴ画像レスポンシブ */
192
+
193
+ @media (max-width: 576px) {
194
+
195
+ .logo-img {
196
+
197
+ width: 60%;
198
+
199
+ }
200
+
201
+ }
202
+
203
+ .nav-link {
204
+
205
+ font-size: 1.2vw;
206
+
207
+ font-weight: bold;
208
+
209
+ line-height: 1px;
210
+
211
+ font-family: normal;
212
+
213
+ }
214
+
215
+ /* アコーディオンメニューのCSS */
216
+
217
+ @media only screen and (max-width: 991px) {
218
+
219
+ .navbar-collapse {
220
+
221
+ text-align: center;
222
+
223
+ background-color: transparent;
224
+
225
+ display : inline-block;
226
+
227
+ color : #ffffff; /* 文字の色 */
228
+
229
+ font-size : 36pt; /* 文字のサイズ */
230
+
231
+ letter-spacing : 4px; /* 文字間 */
232
+
233
+ text-shadow :
234
+
235
+ 2px 2px 1px #003366,
236
+
237
+ -2px 2px 1px #003366,
238
+
239
+ 2px -2px 1px #003366,
240
+
241
+ -2px -2px 1px #003366,
242
+
243
+ 2px 0px 1px #003366,
244
+
245
+ 0px 2px 1px #003366,
246
+
247
+ -2px 0px 1px #003366,
248
+
249
+ 0px -2px 1px #003366;
250
+
251
+ }
252
+
253
+ }
254
+
255
+ /* ふわっとヘッダー文字を表示させ切り替える時のCSS */
256
+
257
+ .fadein1 {
258
+
259
+ animation: fadein 3s ease-in-out infinite alternate both;
260
+
261
+ }
262
+
263
+ .fadein2 {
264
+
265
+ animation: fadein 3s ease-in-out 3s infinite alternate both;
266
+
267
+ }
268
+
269
+ .fadein.scrollin {
270
+
271
+ opacity: 1;
272
+
273
+ transform: translate(0, 0);
274
+
275
+ }
276
+
277
+ @keyframes fadein {
278
+
279
+ 0%{
280
+
281
+ opacity: 0;
282
+
283
+ }
284
+
285
+ 20%{
286
+
287
+ opacity: 0;
288
+
289
+ }
290
+
291
+ }
292
+
293
+ /* ヘッダー画像をnavの下に潜り込ませるCSS */
104
294
 
105
295
 
106
296
 
107
-
108
-
109
- <!-- Optional JavaScript -->
110
-
111
- <!-- jQuery first, then Popper.js, then Bootstrap JS -->
112
-
113
- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
114
-
115
- <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
116
-
117
- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
297
+ .cover-img {
298
+
299
+ height: 100%;
300
+
301
+ display: table;
302
+
303
+ width: 100%;
304
+
305
+ background-size: cover;
306
+
307
+ position: absolute;
308
+
309
+ top: 0;
310
+
311
+ left: 0;
312
+
313
+ }
314
+
315
+ .cover-img-wrapper {
316
+
317
+ height: 600px;
318
+
319
+ position: relative;
320
+
321
+ }
322
+
323
+ /* ワイドスクリーン用のCSS */
118
324
 
119
325
 
120
326
 
121
-
122
-
123
-
124
-
125
- <script type="text/javascript" src="javascript.js"></script>
126
-
127
-
128
-
129
- <script>
130
-
131
- $('.navbar-nav>li>a , .dropdown-menu>a').on('click', function(){
132
-
133
- if(this.id != 'navbarDropdown'){
134
-
135
- $('.navbar-collapse').collapse('hide');
136
-
137
- }
138
-
139
- });
140
-
141
- </script>
142
-
143
- </body>
144
-
145
- </html>
327
+ @media only screen and (min-width: 1500px) {
328
+
329
+ .cover-img-wrapper { /* 修正 */
330
+
331
+ height: 1200px;
332
+
333
+ }
334
+
335
+ }
336
+
337
+ /* タブレット用のCSS */
338
+
339
+
340
+
341
+ @media only screen and (min-width: 768px) and (max-width: 1500px) {
342
+
343
+ .cover-img-wrapper { /* 修正 */
344
+
345
+ height: 800px;
346
+
347
+ }
348
+
349
+ }
350
+
351
+ /* スマホ用のCSS */
352
+
353
+ @media only screen and (max-width: 479px) {
354
+
355
+ .cover-img-wrapper {
356
+
357
+ height: 300px;
358
+
359
+ }
360
+
361
+ }
362
+
363
+ .cover-text {
364
+
365
+ display: table-cell;
366
+
367
+ vertical-align: middle;
368
+
369
+ text-align: center;
370
+
371
+ }
372
+
373
+ .catch-copy p {
374
+
375
+ margin: 0 auto;
376
+
377
+ padding: 0 0.8em;
378
+
379
+ font-size: 3vw;
380
+
381
+ text-align: center;
382
+
383
+ }
384
+
385
+ /* スマホ用のCSS */
386
+
387
+ @media only screen and (max-width: 479px) {
388
+
389
+ .catch-copy p {
390
+
391
+ margin: 0 auto;
392
+
393
+ padding: 0 0.8em;
394
+
395
+ font-size: 3vw;
396
+
397
+ text-align: center;
398
+
399
+ }
400
+
401
+ }
402
+
403
+ .catch-copy-2 p {
404
+
405
+ margin-top: -7.2vw;
406
+
407
+ font-size: 3vw;
408
+
409
+ }
410
+
411
+ /* スマホ用のCSS */
412
+
413
+ @media only screen and (max-width: 479px) {
414
+
415
+ .catch-copy-2 p {
416
+
417
+ margin: 0 auto;
418
+
419
+ padding: 0 0.8em;
420
+
421
+ font-size: 4vw;
422
+
423
+ text-align: center;
424
+
425
+ margin-top: -40px;
426
+
427
+ }
428
+
429
+ }
430
+
431
+ .box {
432
+
433
+ display: flex;
434
+
435
+ align-items: center;
436
+
437
+ justify-content: center;
438
+
439
+ flex-direction: column;
440
+
441
+ width: 100vw;
442
+
443
+ height: 35vw;
444
+
445
+ text-align: center;
446
+
447
+ }
448
+
449
+ .box img {
450
+
451
+ opacity: 0;
452
+
453
+ transition: opacity 1s ease;
454
+
455
+ }
456
+
457
+ .box:hover img {
458
+
459
+ opacity: 1;
460
+
461
+ }
462
+
463
+ .project-image {
464
+
465
+ padding: 0;
466
+
467
+ margin: 0;
468
+
469
+ height: 100%;
470
+
471
+ width: 100%;
472
+
473
+ }
474
+
475
+ .project-category {
476
+
477
+ position: relative;
478
+
479
+ }
480
+
481
+ .project-category p {
482
+
483
+ position: absolute;
484
+
485
+ top: 50%;
486
+
487
+ left: 50%;
488
+
489
+ -ms-transform: translate(-50%,-50%);
490
+
491
+ -webkit-transform: translate(-50%,-50%);
492
+
493
+ transform: translate(-50%,-50%);
494
+
495
+ margin:0;
496
+
497
+ padding:0;
498
+
499
+ font-size: 5vw;
500
+
501
+ font-weight: 600;
502
+
503
+ }
504
+
505
+ /* Footer */
506
+
507
+ .footer {
508
+
509
+ padding-top: 1rem;
510
+
511
+ }
512
+
513
+ .company-name {
514
+
515
+ font-size: 1.5vw;
516
+
517
+ font-weight: 500;
518
+
519
+ }
520
+
521
+ .company-address {
522
+
523
+ font-size: 1.5vw;
524
+
525
+ font-weight: 400;
526
+
527
+ }
528
+
529
+ .logo-image {
530
+
531
+ width: 80%;
532
+
533
+ }
534
+
535
+ .contact-details {
536
+
537
+ font-size: 1.2vw;
538
+
539
+ margin-top: 60px;
540
+
541
+ }
542
+
543
+
544
+
545
+ .footer-logo {
546
+
547
+ margin-top: 100px;
548
+
549
+ }
550
+
551
+ .company-right {
552
+
553
+ text-align: right;
554
+
555
+ }
556
+
557
+ /* footerのスマホ用CSS */
558
+
559
+ @media only screen and (max-width: 992px) {
560
+
561
+ .footer-block {
562
+
563
+ text-align: center;
564
+
565
+ }
566
+
567
+ .company-name {
568
+
569
+ font-size: 20px;
570
+
571
+ }
572
+
573
+ .company-address {
574
+
575
+ font-size: 14px;
576
+
577
+ }
578
+
579
+ .logo-image {
580
+
581
+ width: 70%;
582
+
583
+ }
584
+
585
+ .footer-logo {
586
+
587
+ margin-top: 0px;
588
+
589
+ }
590
+
591
+ .company-right {
592
+
593
+ text-align: center;
594
+
595
+ }
596
+
597
+ .contact-details {
598
+
599
+ font-size: 14px;
600
+
601
+ margin-top: 0px;
602
+
603
+ }
604
+
605
+ }
606
+
607
+
608
+
609
+ .category-title {
610
+
611
+ color:#2250a2;
612
+
613
+ font-size: 3vw;
614
+
615
+ font-weight: 400;
616
+
617
+ }
618
+
619
+
620
+
621
+ .contact-description {
622
+
623
+ color:#2250a2;
624
+
625
+ font-size: 2vw;
626
+
627
+ }
628
+
629
+
630
+
631
+ .rectangle {
632
+
633
+ width: 100%;
634
+
635
+ height: 5vw;
636
+
637
+ margin: 1vw 0;
638
+
639
+ padding: 2vw;
640
+
641
+ }
642
+
643
+
644
+
645
+ .image-bottom {
646
+
647
+ width: 100%;
648
+
649
+ }
650
+
651
+
652
+
653
+ .category-title {
654
+
655
+ margin-bottom: 4vw;
656
+
657
+ }
658
+
659
+
660
+
661
+ .about-us {
662
+
663
+ padding: 0 3vw;
664
+
665
+ font-weight: 500;
666
+
667
+ font-size: 1.2vw;
668
+
669
+ }
670
+
671
+
672
+
673
+ .chairman-pic {
674
+
675
+ width: 47vw;
676
+
677
+ }
678
+
679
+
680
+
681
+ @media only screen and (max-width: 992px) {
682
+
683
+ .chairman-pic {
684
+
685
+ width: 100vw;
686
+
687
+ }
688
+
689
+ .about-us-pic {
690
+
691
+ order: 1;
692
+
693
+ }
694
+
695
+ .about-us {
696
+
697
+ order: 2;
698
+
699
+ }
700
+
701
+ }
702
+
703
+ /* スマホ用のCSS */
704
+
705
+ @media only screen and (max-width: 479px) {
706
+
707
+ .about-us {
708
+
709
+ font-size: 1rem;
710
+
711
+ }
712
+
713
+ }
714
+
715
+ .list {
716
+
717
+ line-height: 1px;
718
+
719
+ }
720
+
721
+ .strategy-title {
722
+
723
+ margin-bottom: 1vw;
724
+
725
+ }
726
+
727
+ .circle {
728
+
729
+ position: relative;
730
+
731
+ display: inline-block;
732
+
733
+ width: 80px;
734
+
735
+ height: 80px;
736
+
737
+ border-radius: 50%;
738
+
739
+ background: skyblue;
740
+
741
+ }
742
+
743
+
744
+
745
+ .circle span {
746
+
747
+ position: absolute;
748
+
749
+ display: inline-block;
750
+
751
+ left: 0;
752
+
753
+ top: 50%;
754
+
755
+ -webkit-transform: translateY(-50%);
756
+
757
+ transform: translateY(-50%);
758
+
759
+ width :80px;
760
+
761
+ text-align:center;
762
+
763
+ }
146
764
 
147
765
  ```
148
-
149
-
150
-
151
- ```CSS
152
-
153
-
154
-
155
- /* Footer */
156
-
157
- .footer {
158
-
159
- padding-top: 1rem;
160
-
161
- }
162
-
163
-
164
-
165
- .company-name {
166
-
167
- font-size: 1.5vw;
168
-
169
- font-weight: 500;
170
-
171
- }
172
-
173
-
174
-
175
- .company-address {
176
-
177
- font-size: 1.5vw;
178
-
179
- font-weight: 400;
180
-
181
- }
182
-
183
-
184
-
185
- .logo-image {
186
-
187
- width: 80%;
188
-
189
- }
190
-
191
-
192
-
193
- .contact-details {
194
-
195
- font-size: 1.2vw;
196
-
197
- margin-top: 60px;
198
-
199
- }
200
-
201
-
202
-
203
- .footer-logo {
204
-
205
- margin-top: 100px;
206
-
207
- }
208
-
209
-
210
-
211
- .company-right {
212
-
213
- text-align: right;
214
-
215
- }
216
-
217
- ```
218
-
219
-
220
-
221
- 初歩的な質問ですみません。
222
-
223
- 宜しくお願い致します。

1

画像添付

2020/10/17 15:54

投稿

Larkiwing
Larkiwing

スコア120

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- footerの部分を作っているのですが、なぜか画面幅が合いません。
1
+ ![イメージ説明](6fd8c0b699d5d8173b6e4736b02208e2.png)footerの部分を作っているのですが、なぜか画面幅が合いません。
2
2
 
3
3
  ちょっとだけ右にずれてしまっているのですが、何がいけないのかわかる方回答をお願いします。
4
4