質問編集履歴

1

該当箇所が分からないので、全体のコードを貼らせて頂きました。ご了承下さい。????

2020/02/11 11:58

投稿

kazuki_user
kazuki_user

スコア147

test CHANGED
File without changes
test CHANGED
@@ -1,12 +1,12 @@
1
1
  サイトの右側にある巨大な余白が消せません。
2
2
 
3
- ```css
3
+ ●css
4
4
 
5
5
  body { overflow: hidden; }
6
6
 
7
7
  .container { overflow: hidden;}
8
8
 
9
- ```を各々してみると、余白は大方消えたものの(少し残った)、画面のスクロールが出来なくなりました。
9
+ を各々してみると、余白は大方消えたものの(少し残った)、画面のスクロールが出来なくなりました。
10
10
 
11
11
  (※bodyとcontainerそれぞれ別々に試しました)
12
12
 
@@ -17,3 +17,935 @@
17
17
 
18
18
 
19
19
  どなたか原因を教えてくださるようよろしくお願いいたします。
20
+
21
+
22
+
23
+ 以下、コードです。????
24
+
25
+
26
+
27
+ ```HTML
28
+
29
+ <!DOCTYPE html>
30
+
31
+ <html lang="en">
32
+
33
+ <head>
34
+
35
+ <meta charset="UTF-8">
36
+
37
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
38
+
39
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
40
+
41
+ <title>Airbnbでお家、アパート、お部屋をシェアしよう
42
+
43
+ </title>
44
+
45
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
46
+
47
+ <link rel="stylesheet" href="css/style.css" >
48
+
49
+ <link rel="icon" href="airbnbpp.png" type="image/vnd.microsoft.icon" />
50
+
51
+ </head>
52
+
53
+
54
+
55
+ <body>
56
+
57
+ <header>
58
+
59
+ <div class='logo'>
60
+
61
+ <img src="airbnbpp.png" alt="ロゴ">
62
+
63
+ </div>
64
+
65
+ <nav>
66
+
67
+ <ul>
68
+
69
+ <li>リスト1</li>
70
+
71
+ <li>リスト2</li>
72
+
73
+ <li>リスト3</li>
74
+
75
+ </ul>
76
+
77
+ </nav>
78
+
79
+ </header>
80
+
81
+
82
+
83
+ <div class="apple">
84
+
85
+
86
+
87
+ <div class="card" style="width: 25rem; height: 29.5rem;" >
88
+
89
+ <div class="card-body">
90
+
91
+ <h5 class="card-title">Airbnbホストになって、暮らしをレベルアップ</h5>
92
+
93
+ <p class="card-text">どれくらいの収入が見込めるかチェック</p>
94
+
95
+
96
+
97
+
98
+
99
+ <input type="text" placeholder="ロケーション" class="location" value="京都">
100
+
101
+
102
+
103
+ <select name="stay" class="occupy">
104
+
105
+ <option value="a">まるまる貸切</option>
106
+
107
+ <option value="b">個室</option>
108
+
109
+ <option value="c">シェアルーム</option>
110
+
111
+ </select>
112
+
113
+
114
+
115
+
116
+
117
+
118
+
119
+ <button type="button2" class="btn btn-danger" id="btn2">はじめる</button>
120
+
121
+ </div>
122
+
123
+ </div>
124
+
125
+ </div>
126
+
127
+
128
+
129
+
130
+
131
+ <div class="all">
132
+
133
+ <div class="container">
134
+
135
+ <div class="row">
136
+
137
+ <div class="one col-12 col-lg-4">
138
+
139
+ <div class="h4">
140
+
141
+ Airbnbでホストするこれだけの理由</div>
142
+
143
+ <p>どんなお家やお部屋でも、Airbnbなら簡単かつ安全にシェアでき、世界中の旅好きな仲間とつながれます。 予約可能日から料金、ハウスルール、ゲストとの交流程度まで、すべて自分で決めることができます。</p>
144
+
145
+ </div>
146
+
147
+
148
+
149
+ <div class="two col-12 col-lg-4">
150
+
151
+ <div class="h4">Airbnbならホストも安心安全</div>
152
+
153
+ <p>万一に備えるUS$1,000,000の財物補償、US$1,000,000の賠償責任保険が全予約に自動付帯。ホストのみなさまと建物・家財の安全をお守りするため全力で取り組んでいます。</p>
154
+
155
+ <a href="#" class="a">ホストを守るAirbnbの仕組みをチェック</a>
156
+
157
+ </div>
158
+
159
+
160
+
161
+ <div class="three col-12 col-lg-4">
162
+
163
+ <div class="h4">ゲストは認証済みです</div>
164
+
165
+ <p>Airbnbは全ゲストを対象に、予約の前に一定の情報(認証済み電話番号、メールアドレスなど)の提供を求めています。 さらにご希望の場合は、ほかのホストからの推薦、認証済みIDの取得を追加要件として求めることもできます。</p>
166
+
167
+ </div>
168
+
169
+ </div>
170
+
171
+ </div>
172
+
173
+
174
+
175
+ <div class="_">______</div>
176
+
177
+ <div class="step">3ステップでホスティング</div>
178
+
179
+
180
+
181
+ <div class="container">
182
+
183
+ <div class="row">
184
+
185
+ <div class="col-12 col-lg-4">
186
+
187
+ <div class="N1">1</div>
188
+
189
+ <div class="h4">無料でお部屋を掲載</div>
190
+
191
+ <p><p>共有のリビングルームから別荘に至るまで、どんなスペースでも登録料なしで共有しましょう。</p></p>
192
+
193
+ </div>
194
+
195
+
196
+
197
+ <div class="col-12 col-lg-4">
198
+
199
+ <div class="N2">2</div>
200
+
201
+ <div class="h4">ホスティング方法を設定</div>
202
+
203
+ <p>スケジュール、料金、ゲストへの要件をご自身で選択しましょう。 お困りの際にはいつでもサポートいたします。</p>
204
+
205
+ </div>
206
+
207
+
208
+
209
+ <div class="col-12 col-lg-4">
210
+
211
+ <div class="N3">3</div>
212
+
213
+ <div class="h4">はじめてのゲストが来ます!</div>
214
+
215
+ <p>リスティングが掲載されると、条件にかなったゲストから連絡を受けとることができます。 ゲストの到着前に質問があればメッセージを送信できます。</p>
216
+
217
+ <a href="#" class="a">ホストをはじめる方法をチェック</a>
218
+
219
+ </div>
220
+
221
+ </div>
222
+
223
+ </div>
224
+
225
+
226
+
227
+ <div class="A">
228
+
229
+ <img src="../mother.jpg" alt="ホストマザー">
230
+
231
+ <div class="s1">
232
+
233
+ <p class="s2">ホスティングの収入でキッチンを新調したり、<br>他の改装費用の一部を賄うことができました」</p>
234
+
235
+ <p class="s3">Tessaさんはロンドン在住。<br>ホストになって経済的なゆとりができました</p>
236
+
237
+ <button type="button" class="btn btn-light">実践例をチェック</button>
238
+
239
+ </div>
240
+
241
+ </div>
242
+
243
+ </div>
244
+
245
+
246
+
247
+
248
+
249
+
250
+
251
+
252
+
253
+ </body>
254
+
255
+ </html>
256
+
257
+ ```
258
+
259
+
260
+
261
+
262
+
263
+
264
+
265
+
266
+
267
+ ```CSS
268
+
269
+ header {
270
+
271
+ width: 1567px;
272
+
273
+ height: 100px;
274
+
275
+ z-index: 9999;
276
+
277
+ display: flex;
278
+
279
+ justify-content: space-between;
280
+
281
+ position: fixed;
282
+
283
+ }
284
+
285
+
286
+
287
+ .logo {
288
+
289
+ width: 50px;
290
+
291
+ height: 50px;
292
+
293
+ padding-left: 0;
294
+
295
+ }
296
+
297
+
298
+
299
+ .logo img {
300
+
301
+ max-width: 100%;
302
+
303
+ margin-left: 0;
304
+
305
+
306
+
307
+ }
308
+
309
+
310
+
311
+ nav ul {
312
+
313
+ display: flex;
314
+
315
+ list-style: none;
316
+
317
+
318
+
319
+ }
320
+
321
+
322
+
323
+ nav ul li {
324
+
325
+ margin-left: 15px;
326
+
327
+
328
+
329
+ }
330
+
331
+ /* ____________________________________ */
332
+
333
+
334
+
335
+
336
+
337
+
338
+
339
+ li {
340
+
341
+ font-weight: bold;
342
+
343
+ margin-right: 10px;
344
+
345
+ }
346
+
347
+ .apple {
348
+
349
+ background-image: url("../airbnb.jpg");
350
+
351
+ background-size: cover;
352
+
353
+ height: 900px;
354
+
355
+ background-repeat: no-repeat;
356
+
357
+ position: relative;
358
+
359
+ }
360
+
361
+
362
+
363
+
364
+
365
+
366
+
367
+ /* デスクトップ */
368
+
369
+
370
+
371
+ @media screen and (min-width:1000px) {
372
+
373
+ .card {
374
+
375
+ float: right;
376
+
377
+ margin: 32px;
378
+
379
+ }
380
+
381
+
382
+
383
+ .card-title {
384
+
385
+ font-weight: bold;
386
+
387
+ font-size: 40px;
388
+
389
+ margin-bottom: 15px;
390
+
391
+ text-align: left;
392
+
393
+ margin-top: 10px;
394
+
395
+ }
396
+
397
+
398
+
399
+ .card-text {
400
+
401
+ font-weight: bold;
402
+
403
+ font-size: 16px;
404
+
405
+
406
+
407
+ }
408
+
409
+
410
+
411
+ .btn {
412
+
413
+ font-weight: bold;
414
+
415
+ }
416
+
417
+
418
+
419
+ .location {
420
+
421
+ border-radius: 4px;
422
+
423
+ padding: 11px;
424
+
425
+ margin-bottom: 8px;
426
+
427
+ width: 360px;
428
+
429
+ }
430
+
431
+
432
+
433
+ .occupy {
434
+
435
+ border-radius: 4px;
436
+
437
+ padding: 11px 40px 11px 11px;
438
+
439
+ }
440
+
441
+
442
+
443
+ .guest {
444
+
445
+ border-radius: 4px;
446
+
447
+ padding: 11px 40px 11px 11px;
448
+
449
+ }
450
+
451
+
452
+
453
+ #btn2 {
454
+
455
+ width: 360px;
456
+
457
+ padding: 10px 22px;
458
+
459
+ margin-top: 1px;
460
+
461
+ }
462
+
463
+
464
+
465
+ img {
466
+
467
+ width: 380px;
468
+
469
+ height: 380px;
470
+
471
+ margin-bottom: 30px;
472
+
473
+ margin-left: 220px;
474
+
475
+ margin-right: 30px;
476
+
477
+ }
478
+
479
+
480
+
481
+ .s1 {
482
+
483
+ margin-top: 70px;
484
+
485
+ margin-left: 50px;
486
+
487
+ }
488
+
489
+ .s2 {
490
+
491
+ columns: #484848;
492
+
493
+ font-size: 32px;
494
+
495
+ }
496
+
497
+ .s3 {
498
+
499
+ color: #767676;
500
+
501
+ font-size: 16px;
502
+
503
+ }
504
+
505
+ .btn {
506
+
507
+ font-weight: bold;
508
+
509
+ border: solid black;
510
+
511
+ font-size: 16px;
512
+
513
+ }
514
+
515
+
516
+
517
+ ._ {
518
+
519
+ font-weight: bolder;
520
+
521
+ font-size: 30px;
522
+
523
+ color: #484848;
524
+
525
+ text-align: center;
526
+
527
+ margin-top: 140px;
528
+
529
+ }
530
+
531
+
532
+
533
+ .step {
534
+
535
+ font-size: 60px;
536
+
537
+ font-weight: bold;
538
+
539
+ text-align: center;
540
+
541
+
542
+
543
+ }
544
+
545
+
546
+
547
+
548
+
549
+ .a2 {
550
+
551
+ color: rgb(49, 148, 115);
552
+
553
+ display: block;
554
+
555
+ margin-top: 40px;
556
+
557
+ margin-left: 40px;
558
+
559
+ margin-bottom: 10px;
560
+
561
+ font-size: 20px;
562
+
563
+ }
564
+
565
+
566
+
567
+ ._2 {
568
+
569
+ margin-left: 40px;
570
+
571
+ }
572
+
573
+ .A {
574
+
575
+ width: 2500px;
576
+
577
+ height: 380px;
578
+
579
+ display: flex;
580
+
581
+ margin-top: 170px;
582
+
583
+ }
584
+
585
+
586
+
587
+
588
+
589
+ }
590
+
591
+
592
+
593
+ /* デスクトップここまで */
594
+
595
+
596
+
597
+ /* モバイル */
598
+
599
+
600
+
601
+ @media screen and (max-width: 999px) {
602
+
603
+ .card {
604
+
605
+ display: none;
606
+
607
+ }
608
+
609
+ .greap {
610
+
611
+ font-size: 50px;
612
+
613
+ font-weight: bold;
614
+
615
+ color: aliceblue;
616
+
617
+ position: absolute;
618
+
619
+ bottom: 0;
620
+
621
+ width: 100%;
622
+
623
+ height: 20%;
624
+
625
+ text-align: center;
626
+
627
+ line-height: 50px;
628
+
629
+ letter-spacing: 2px;
630
+
631
+ }
632
+
633
+ img {
634
+
635
+ width: 350px;
636
+
637
+ height: 340px;
638
+
639
+ margin-top: 70px;
640
+
641
+ margin-right: 30px;
642
+
643
+ margin-left: 40px;
644
+
645
+
646
+
647
+ }
648
+
649
+
650
+
651
+ .s1 {
652
+
653
+ margin-top: 63px;
654
+
655
+ margin-left: 40px;
656
+
657
+ }
658
+
659
+ .s2 {
660
+
661
+ columns: #484848;
662
+
663
+ font-size: 22px;
664
+
665
+ }
666
+
667
+ .s3 {
668
+
669
+ color: #767676;
670
+
671
+ font-size: 16px;
672
+
673
+ }
674
+
675
+ .btn {
676
+
677
+ font-weight: bold;
678
+
679
+ border: solid black;
680
+
681
+ font-size: 16px;
682
+
683
+ }
684
+
685
+ ._ {
686
+
687
+ font-weight: bolder;
688
+
689
+ font-size: 30px;
690
+
691
+ color: #484848;
692
+
693
+ text-align: center;
694
+
695
+ }
696
+
697
+
698
+
699
+ .step {
700
+
701
+ font-size: 45px;
702
+
703
+ font-weight: bold;
704
+
705
+ text-align: center;
706
+
707
+ }
708
+
709
+
710
+
711
+ .a2 {
712
+
713
+ color: rgb(49, 148, 115);
714
+
715
+ display: block;
716
+
717
+ margin-top: 40px;
718
+
719
+ margin-left: 40px;
720
+
721
+ margin-bottom: 10px;
722
+
723
+ font-size: 18px;
724
+
725
+ }
726
+
727
+
728
+
729
+ ._2 {
730
+
731
+ margin-left: 40px;
732
+
733
+
734
+
735
+ }
736
+
737
+ .A {
738
+
739
+ width: 2500px;
740
+
741
+ height: 680px;
742
+
743
+ margin-left: 45px;
744
+
745
+ }
746
+
747
+
748
+
749
+
750
+
751
+ }
752
+
753
+ /* モバイルここまで */
754
+
755
+
756
+
757
+
758
+
759
+
760
+
761
+ .all {
762
+
763
+ margin-right: auto;
764
+
765
+ margin-left: auto;
766
+
767
+ }
768
+
769
+
770
+
771
+
772
+
773
+
774
+
775
+ .h4 {
776
+
777
+ font-weight: bold;
778
+
779
+ margin-bottom: 20px;
780
+
781
+ margin-top: 70px;
782
+
783
+ }
784
+
785
+
786
+
787
+ .one {
788
+
789
+ margin-top: 30px;
790
+
791
+ }
792
+
793
+ .two {
794
+
795
+ margin-top: 30px;
796
+
797
+ }
798
+
799
+ .three {
800
+
801
+ margin-top: 30px;
802
+
803
+ }
804
+
805
+
806
+
807
+
808
+
809
+ .a {
810
+
811
+ color: rgb(49, 148, 115);
812
+
813
+ }
814
+
815
+
816
+
817
+ .N1 {
818
+
819
+ background-color: cadetblue;
820
+
821
+ width: 50px;
822
+
823
+ height: 50px;
824
+
825
+ border-radius: 100%;
826
+
827
+ color: aliceblue;
828
+
829
+ font-weight: bold;
830
+
831
+ text-align: center;
832
+
833
+ padding-top: 10px;
834
+
835
+ font-size: 20px;
836
+
837
+ margin-top: 40px;
838
+
839
+ margin-bottom: 20px;
840
+
841
+ }
842
+
843
+
844
+
845
+ .N2 {
846
+
847
+ background-color: cadetblue;
848
+
849
+ width: 50px;
850
+
851
+ height: 50px;
852
+
853
+ border-radius: 100%;
854
+
855
+ color: aliceblue;
856
+
857
+ font-weight: bold;
858
+
859
+ text-align: center;
860
+
861
+ padding-top: 10px;
862
+
863
+ font-size: 20px;
864
+
865
+ margin-top: 40px;
866
+
867
+ margin-bottom: 20px;
868
+
869
+ }
870
+
871
+
872
+
873
+ .N3 {
874
+
875
+ background-color: cadetblue;
876
+
877
+ width: 50px;
878
+
879
+ height: 50px;
880
+
881
+ border-radius: 100%;
882
+
883
+ color: aliceblue;
884
+
885
+ font-weight: bold;
886
+
887
+ text-align: center;
888
+
889
+ padding-top: 10px;
890
+
891
+ font-size: 20px;
892
+
893
+ margin-top: 40px;
894
+
895
+ margin-bottom: 20px;
896
+
897
+ }
898
+
899
+
900
+
901
+ h5 {
902
+
903
+ font-weight: bold;
904
+
905
+ font-size: 16px;
906
+
907
+ }
908
+
909
+ .ppp p {
910
+
911
+ font-size: 14px;
912
+
913
+ }
914
+
915
+
916
+
917
+ .set{
918
+
919
+ border: solid rgb(116, 113, 113) 2px;
920
+
921
+ border-radius: 3px;
922
+
923
+ box-shadow:2px 2px 1px ;
924
+
925
+ width: 100%;
926
+
927
+ height: 100px;
928
+
929
+ padding-top: 20px;
930
+
931
+ padding-left: 10px;
932
+
933
+ display: flex;
934
+
935
+ background-image: url("../entrance.jpg");
936
+
937
+ background-position: 0 0 ;
938
+
939
+ }
940
+
941
+
942
+
943
+ .set img {
944
+
945
+ width: 100px;
946
+
947
+ height: 100px;
948
+
949
+ }
950
+
951
+ ```