質問編集履歴

1

CSS情報修正

2019/05/12 15:12

投稿

ShinYam
ShinYam

スコア23

test CHANGED
File without changes
test CHANGED
@@ -218,199 +218,777 @@
218
218
 
219
219
  コード
220
220
 
221
- <!DOCTYPE html>
222
-
223
- <html>
224
-
225
- <head>
226
-
227
- <meta charset="utf-8";>
228
-
229
- <title>Airbnbcopy</title>
230
-
231
- <link href="https://use.fontawesome.com/releases/v5.8.0/css/all.css" rel="stylesheet">
232
-
233
- <!-- Required meta tags -->
234
-
235
- <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
236
-
237
-
238
-
239
- <!-- Bootstrap CSS -->
240
-
241
- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
242
-
243
- <link rel="stylesheet" href="css/index.css" />
244
-
245
-
246
-
247
- </head>
248
-
249
-
250
-
251
- <body>
252
-
253
- <header>
254
-
255
- <div class="header-container">
256
-
257
- <div class="menu-box">
258
-
259
- <div class="logo"><i class="fab fa-airbnb "></i></div>
260
-
261
- <input class="search" type="search" name="search" placeholder=" ???? 探す">
262
-
263
- </div>
264
-
265
-
266
-
267
- <nav>
268
-
269
- <ul>
270
-
271
-   <li><a href="#">ホストをはじめる</a></li>
272
-
273
- <li><a href="#">ヘルプ</a></li>
274
-
275
- <li><a href="#">登録する</a></li>
276
-
277
- <li><a href="#">ログイン</a></li>
278
-
279
- </ul>
280
-
281
-   </nav>
282
-
283
- </div>
284
-
285
- </header>
286
-
287
-
288
-
289
- <main>
290
-
291
- <div><!-- nth-child(1) -->
292
-
293
- <section id="message">
294
-
295
- <h2><i class="fab fa-speakap fa-2x"></i>今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。アメリカにお住いの場合は、アカウントの設定から居住国を更新してください。<button class="close" aria-hidden="true" type="button" data-dismiss="alert">×</button></h2><!--<h2>~<h6>のヘッディングコンテンツを使う際は、<article>、<aside>、<section>のいずれかが親であり、親の最初の子である必要があります。-->
296
-
297
- <script>
298
-
299
- //#delをクリックでメッセージ削除
300
-
301
- const del = document.getElementById('del');
302
-
303
- const hidden = document.getElementById('message');
304
-
305
- del.addEventListener('click', function() {
306
-
307
- hidden.style.display = 'none';
308
-
309
- });
310
-
311
- </script>
312
-
313
- </section>
314
-
315
- </div>
316
-
317
-
318
-
319
- <div class="middle">
320
-
321
- <h1>旅を贈ろう。</h1>
322
-
323
- <h3>Air bnbギフトカードで、世界をぐんと身近に</h3>
324
-
325
- <input type="submit" value="ギフトカードを登録">
326
-
327
- </div>
328
-
329
-
330
-
331
- </main>
332
-
333
-
334
-
335
- <div class="message-container">
336
-
337
- <h2>いつも完璧な贈り物</h2>
338
-
339
- <div class="iconwraper">
340
-
341
- <div class="inner1">
342
-
343
- <i class="far fa-envelope fa-3x mailicon"></i>
344
-
345
- <p>簡単に使える</p>
346
-
347
- <p class="explain">ギフトカードはメールで届きます。Airbnbアカウントへのギフト登録も超かんたん。</p>
348
-
349
- </div>
350
-
351
-
352
-
353
-
354
-
355
- <div class="inner2">
356
-
357
- <i class="fas fa-stopwatch fa-3x mailicon"></i>
358
-
359
- <p>有効期限なし</p>
360
-
361
- <p class="explain">Airbnbギフトカードは無期限。だから友達も時間をかけて旅をプランできます。</p>
362
-
363
- </div>
364
-
365
-
366
-
367
- <div class="inner3">
368
-
369
- <i class="fas fa-globe-europe fa-3x mailicon"></i>
370
-
371
- <p>忘れられない旅</p>
372
-
373
- <p class="explain">お家は100万件以上あるので、ずっと住みたいと憧れていた街の暮らしも叶います。</p>
374
-
375
- </div>
376
-
377
- </div>
378
-
379
-
380
-
381
- <div class="present">
382
-
383
- <img src="https://a0.muscache.com/airbnb/gift_credit_v2/Home Page/Present Icon/Present Icon.png" alt="">
384
-
385
- <h2>ギフトカードを貰ったら...</h2>
386
-
387
- <h3>ログインあるいは、利用登録してギフトを登録するだけです。あとは使い途をゆっくり考えましょう。</h3>
388
-
389
- <input type="submit" value="ギフトカードを登録する">
390
-
391
- <p>Air bnbギフトカードの仕組みは?</p>
392
-
393
- </div>
394
-
395
-
396
-
397
-
398
-
399
-
400
-
401
- <!-- Optional JavaScript -->
402
-
403
- <!-- jQuery first, then Popper.js, then Bootstrap JS -->
404
-
405
- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
406
-
407
- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
408
-
409
- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
410
-
411
- </body>
412
-
413
- </html>
221
+ @charset "UTF-8";
222
+
223
+
224
+
225
+ /* RESET CSS */
226
+
227
+ html, body, div,button, span, h1, h2, h3, h4, h5, h6, p, a, img, small, ul, li, article, aside, section, footer, header, nav , input {
228
+
229
+ margin: 0;
230
+
231
+ padding: 0;
232
+
233
+ border: 0;
234
+
235
+ font: inherit;
236
+
237
+ vertical-align: baseline;
238
+
239
+ list-style-type: none;
240
+
241
+ }
242
+
243
+
244
+
245
+ header .header-container {
246
+
247
+ height : 80px;
248
+
249
+ width : 100%;
250
+
251
+ background-color: white;
252
+
253
+ position : relative;
254
+
255
+ }
256
+
257
+
258
+
259
+
260
+
261
+ header .menu-box {
262
+
263
+ height : 80px;
264
+
265
+ width : 40%;
266
+
267
+ background-color: white;
268
+
269
+ display: flex;
270
+
271
+ }
272
+
273
+
274
+
275
+ header .logo {
276
+
277
+ padding-top: 15px;
278
+
279
+ color: red;
280
+
281
+ }
282
+
283
+
284
+
285
+ header .fa-airbnb {
286
+
287
+ font-size: 35px;
288
+
289
+ }
290
+
291
+
292
+
293
+ header input {
294
+
295
+ border-radius: 5px;
296
+
297
+ }
298
+
299
+
300
+
301
+ header .search {
302
+
303
+ border: 1px solid;
304
+
305
+ border-color: rgba(200,200,200,0.5);
306
+
307
+ margin-top: 20px;
308
+
309
+ width: 460px;
310
+
311
+ height: 45px;
312
+
313
+ font-weight: bold;
314
+
315
+ box-shadow:5px 5px 10px grey;
316
+
317
+ }
318
+
319
+
320
+
321
+ nav {
322
+
323
+ width: 60%;
324
+
325
+ position: absolute;
326
+
327
+ top: 0;
328
+
329
+ right: 0;
330
+
331
+ padding-top: 25px;
332
+
333
+ }
334
+
335
+
336
+
337
+
338
+
339
+ ul {
340
+
341
+ width: 100%;
342
+
343
+ display: flex;
344
+
345
+ justify-content: flex-end;
346
+
347
+ align-items: center;
348
+
349
+ }
350
+
351
+
352
+
353
+ @media screen and (max-width: 480px) {
354
+
355
+ ul li { display: none; }
356
+
357
+ }
358
+
359
+
360
+
361
+
362
+
363
+ ul li {
364
+
365
+ padding-left: 5px;
366
+
367
+ padding-right: 30px;
368
+
369
+ font-weight: bold;
370
+
371
+ }
372
+
373
+
374
+
375
+ a {
376
+
377
+ color: black;
378
+
379
+ text-decoration: none;
380
+
381
+ }
382
+
383
+
384
+
385
+
386
+
387
+ a:hover {
388
+
389
+ color: black;
390
+
391
+ text-decoration: none;
392
+
393
+ border-bottom: 2px solid black;
394
+
395
+ padding-bottom: 32px;
396
+
397
+ }
398
+
399
+
400
+
401
+ main {
402
+
403
+ background-image : url("../pic.jpg");
404
+
405
+ background-size: cover;
406
+
407
+ height : 650px;
408
+
409
+ width: 100%;
410
+
411
+ color: white;
412
+
413
+ position: relative;
414
+
415
+ }
416
+
417
+
418
+
419
+ .close {
420
+
421
+ margin-top: 10px;
422
+
423
+ margin-right: 10px;
424
+
425
+ }
426
+
427
+
428
+
429
+ main div:nth-child(1) {
430
+
431
+ width: 100%;
432
+
433
+ height: 50px;
434
+
435
+ background: #C2E4E7;
436
+
437
+ }
438
+
439
+
440
+
441
+ main div:nth-child(1) h2 {
442
+
443
+ color : black;
444
+
445
+ text-align: center;
446
+
447
+ padding-top: 5px;
448
+
449
+ font-size : 15px;
450
+
451
+ font-weight: normal;
452
+
453
+ }
454
+
455
+
456
+
457
+ .fa-speakap {
458
+
459
+ padding: 0 10px;
460
+
461
+ }
462
+
463
+
464
+
465
+ main .middle {
466
+
467
+ position: absolute;
468
+
469
+ padding-left: 20%;
470
+
471
+ padding-top: 20%;
472
+
473
+ }
474
+
475
+
476
+
477
+
478
+
479
+ main .middle h1 {
480
+
481
+ font-size: 46px;
482
+
483
+ font-weight: bold;
484
+
485
+ }
486
+
487
+
488
+
489
+ main .middle h3 {
490
+
491
+ padding-top: 10px;
492
+
493
+ padding-bottom: 30px;
494
+
495
+ font-size: 18px;
496
+
497
+ }
498
+
499
+
500
+
501
+ main .middle input {
502
+
503
+ padding: 13px 22px;
504
+
505
+ border-radius: 5px;
506
+
507
+ background-color: white;
508
+
509
+ font-weight: bold;
510
+
511
+ }
512
+
513
+
514
+
515
+ .message-container {
516
+
517
+ height : 500px;
518
+
519
+ width : 100%;
520
+
521
+ }
522
+
523
+
524
+
525
+
526
+
527
+ .message-container h2 {
528
+
529
+ font-size: 30px;
530
+
531
+ text-align: center;
532
+
533
+ padding: 40px;
534
+
535
+ font-weight: bold;
536
+
537
+ }
538
+
539
+
540
+
541
+ .iconwraper {
542
+
543
+ position: relative;
544
+
545
+ padding-left: 200px;
546
+
547
+ padding-right: 200px;
548
+
549
+ padding-bottom: 75px;
550
+
551
+ }
552
+
553
+
554
+
555
+ .mailicon {
556
+
557
+ color : green;
558
+
559
+ padding-bottom: 20px;
560
+
561
+ }
562
+
563
+
564
+
565
+ .mailicon2 {
566
+
567
+ color : grey;
568
+
569
+ padding-bottom: 20px;
570
+
571
+ }
572
+
573
+
574
+
575
+ .inner1,.inner2,.inner3 {
576
+
577
+ height : auto;
578
+
579
+ text-align: center;
580
+
581
+ width : 33%;
582
+
583
+ display: inline-block;
584
+
585
+ vertical-align: top;
586
+
587
+ }
588
+
589
+
590
+
591
+ @media screen and (max-width: 480px) {
592
+
593
+ .inner1,.inner2,.inner3 { width: 100%; }
594
+
595
+ }
596
+
597
+
598
+
599
+ .message-container p {
600
+
601
+ font-size :16px;
602
+
603
+ font-weight: bold;
604
+
605
+ padding-right: 15px;
606
+
607
+ padding-left: 15px;
608
+
609
+ }
610
+
611
+
612
+
613
+ .message-container .explain {
614
+
615
+ font-size: 16px;
616
+
617
+ opacity: 0.5;
618
+
619
+ padding-top: 5%;
620
+
621
+ }
622
+
623
+
624
+
625
+ .present {
626
+
627
+ background-color: #007a87;
628
+
629
+ height: 440px;
630
+
631
+ padding-top : 45px;
632
+
633
+ text-align: center;
634
+
635
+ }
636
+
637
+
638
+
639
+ .present h2{
640
+
641
+ color: white;
642
+
643
+ padding-top: 10px;
644
+
645
+ padding-bottom: 15px;
646
+
647
+ }
648
+
649
+
650
+
651
+ .present h3{
652
+
653
+ color: white;
654
+
655
+ font-size: 20px;
656
+
657
+
658
+
659
+ }
660
+
661
+
662
+
663
+ .present input {
664
+
665
+ background-color: red;
666
+
667
+ padding : 10px 28px;
668
+
669
+ border-radius: 5px;
670
+
671
+ color : white;
672
+
673
+ font-weight: bold;
674
+
675
+ margin-top : 60px;
676
+
677
+ }
678
+
679
+
680
+
681
+ .present input:hover {
682
+
683
+ color: #fff;
684
+
685
+ opacity :0.7;
686
+
687
+ }
688
+
689
+
690
+
691
+ .present p {
692
+
693
+ color : white;
694
+
695
+ opacity :0.7;
696
+
697
+ font-weight: normal;
698
+
699
+ font-size: 15px;
700
+
701
+ margin-top: 20px;
702
+
703
+ }
704
+
705
+
706
+
707
+ footer {
708
+
709
+ margin-top: 60px;
710
+
711
+ margin-bottom: 30px;
712
+
713
+ width :auto;
714
+
715
+ }
716
+
717
+
718
+
719
+ .listwrapper {
720
+
721
+ display : flex;
722
+
723
+ justify-content: center;
724
+
725
+ padding-bottom: 5px;
726
+
727
+ width: auto;
728
+
729
+ }
730
+
731
+
732
+
733
+
734
+
735
+ .empty {
736
+
737
+ height: 15px;
738
+
739
+
740
+
741
+ }
742
+
743
+
744
+
745
+ footer ul {
746
+
747
+ display: inline-block;
748
+
749
+ }
750
+
751
+
752
+
753
+ footer ul li {
754
+
755
+ font-size: 14px;
756
+
757
+ font-weight: normal;
758
+
759
+ }
760
+
761
+
762
+
763
+ .title {
764
+
765
+ font-weight: bold;
766
+
767
+ }
768
+
769
+
770
+
771
+ .new {
772
+
773
+ background-color: green
774
+
775
+ margin-left: 3px;
776
+
777
+ }
778
+
779
+
780
+
781
+
782
+
783
+ .fa-facebook-f,.fa-twitter,.fa-instagram {
784
+
785
+ padding-right: 20px;
786
+
787
+ }
788
+
789
+
790
+
791
+ ul .lists .fa-facebook-f:hover {
792
+
793
+ color: red;
794
+
795
+ border-color: white;
796
+
797
+ }
798
+
799
+
800
+
801
+
802
+
803
+ .list {
804
+
805
+ margin: 0 35px;
806
+
807
+ color: black;
808
+
809
+ }
810
+
811
+
812
+
813
+
814
+
815
+ .lists a:hover {
816
+
817
+ text-decoration: none;
818
+
819
+ border-bottom:1px solid grey;
820
+
821
+ padding: 0px;
822
+
823
+ }
824
+
825
+
826
+
827
+
828
+
829
+ .lists {
830
+
831
+ color: grey;
832
+
833
+ font-weight: bold;
834
+
835
+ }
836
+
837
+
838
+
839
+ .copy {
840
+
841
+ height: 100px;
842
+
843
+ font-size: 14px;
844
+
845
+ font-weight: bold;
846
+
847
+ color: grey;
848
+
849
+ padding : 8px 19%;
850
+
851
+ width: auto;
852
+
853
+ position: relative;
854
+
855
+ }
856
+
857
+
858
+
859
+ .copy a {
860
+
861
+ color : grey;
862
+
863
+ }
864
+
865
+
866
+
867
+ .bothwrapper {
868
+
869
+ display : flex;
870
+
871
+ justify-content: space-around;
872
+
873
+ width: auto;
874
+
875
+ }
876
+
877
+
878
+
879
+ .fa-airbnb {
880
+
881
+ padding-top: 10px;
882
+
883
+ margin-right: 10px;
884
+
885
+ margin-left: 60px;
886
+
887
+ font-size: 25px;
888
+
889
+ }
890
+
891
+
892
+
893
+ .Arc {
894
+
895
+
896
+
897
+ }
898
+
899
+
900
+
901
+ .abc {
902
+
903
+
904
+
905
+ }
906
+
907
+
908
+
909
+ .def {
910
+
911
+
912
+
913
+ }
914
+
915
+
916
+
917
+ .leftcontainer {
918
+
919
+ padding-bottom: 30px;
920
+
921
+ padding-left: 50px;
922
+
923
+ display: flex
924
+
925
+ }
926
+
927
+
928
+
929
+ .middlecontainer {
930
+
931
+ margin-left: 0px;
932
+
933
+ padding-left: 0px;
934
+
935
+ }
936
+
937
+
938
+
939
+ .right1 {
940
+
941
+ margin-left: 400px;
942
+
943
+ padding-left: 50px;
944
+
945
+ }
946
+
947
+
948
+
949
+ .right2 {
950
+
951
+ margin-left: 0px;
952
+
953
+ }
954
+
955
+
956
+
957
+ button {
958
+
959
+ padding: 5px 8px;
960
+
961
+ background-color: white;
962
+
963
+ border: 1px solid grey;
964
+
965
+ opacity: 0.5;
966
+
967
+ font-weight: bold;
968
+
969
+ }
970
+
971
+
972
+
973
+ button:hover {
974
+
975
+ background-color: grey;
976
+
977
+
978
+
979
+ }
980
+
981
+
982
+
983
+ footer .copy .bothwrapper .middlecontainer a:hover {
984
+
985
+ text-decoration: none;
986
+
987
+ border-bottom:1px solid grey;
988
+
989
+ padding: 0px;
990
+
991
+ }
414
992
 
415
993
 
416
994