質問編集履歴

1

簡潔にまとめた

2020/10/15 14:42

投稿

ShinKoba
ShinKoba

スコア8

test CHANGED
File without changes
test CHANGED
@@ -6,379 +6,37 @@
6
6
 
7
7
  この場合、いつもpositionで移動しているのですが、なるべくは使わない方法でやりたいと思っています。
8
8
 
9
- ご教授いただければ幸いです。```ここに言語を入力
9
+ ご教授いただければ幸いです。
10
-
11
- コード
12
-
13
- ```header{
14
-
15
- background-color: #1dcae0;
16
-
17
- display: flex;
18
-
19
- justify-content: space-between;
20
-
21
- color: #fff;
22
-
23
- font-size: 18px;
24
-
25
- padding: 5px 0;
26
-
27
- }
28
-
29
-
30
-
31
- .fixed{
32
-
33
- position: fixed;
34
-
35
- width: 100%;
36
-
37
- /*margin-top: -70px;*/
38
-
39
- }
40
-
41
-
42
-
43
- #margin-for-fixed{
44
-
45
- /*margin-top: 70px;*/
46
-
47
- }
48
-
49
-
50
-
51
- .icon{
52
-
53
- align-items: center;
54
-
55
- }
56
-
57
-
58
-
59
- .icon img{
60
-
61
- height: 60px;
62
-
63
- align-items: center;
64
-
65
- margin-left: 80px;
66
-
67
- }
68
-
69
-
70
-
71
- .icon .name strong{
72
-
73
- color: #eae51f;
74
-
75
- }
76
-
77
-
78
-
79
- .header-right{
80
-
81
- display: flex;
82
-
83
- align-items: center;
84
-
85
- margin-right: 80px
86
-
87
- }
88
-
89
-
90
-
91
- .header-right li:first-child{
92
-
93
- margin-right: 20px;
94
-
95
- }
96
-
97
- /*header終わり*/
98
-
99
- .welcome{
100
-
101
- height:500px;
102
-
103
- background-image: url(../img/background1.jpg);
104
-
105
- color: #fff;
106
-
107
- text-align: center;
108
-
109
- display: flex;
110
-
111
- flex-direction: column;
112
-
113
- justify-content: center;
114
-
115
- }
116
-
117
-
118
-
119
- .title{
120
-
121
- font-size: 64px;
122
-
123
- }
124
-
125
-
126
-
127
- .guideline{
128
-
129
- font-size: 28px;
130
-
131
- font-weight:bold;
132
-
133
- margin-top: 16px;
134
-
135
- }
136
-
137
-
138
-
139
- .btn-group{
140
-
141
- margin-top: 60px;
142
-
143
- }
144
10
 
145
11
 
146
12
 
147
13
 
148
14
 
149
- .btn{
15
+ ```HTML
150
16
 
151
- height: 55px;
17
+ <footer>
152
18
 
153
- width: 170px;
19
+ <!-- footer 左がわ -->
154
20
 
155
- color: #fff;
21
+ <div class="icon">
156
22
 
157
- border-radius: 10px;
23
+ <img src="img/seedkun.png">
158
24
 
159
- cursor: pointer;
25
+ <span class="name"><strong>Seed</strong>Kun</span>
160
26
 
161
- margin-left: 120px;
27
+ </div>
162
28
 
163
- font-size: 28px;
29
+ <!-- footer 右側 -->
164
30
 
31
+ <a class="footer-right">Copyright(c)Seedkun inc</a>
32
+
165
- }
33
+ </footer>
166
34
 
167
35
 
168
36
 
169
- .btn:first-child{
37
+ ``
170
38
 
171
- margin-left: 0;
172
-
173
- }
174
-
175
-
176
-
177
- .register{
178
-
179
- background-color: rgba(29,172,224, .5);
180
-
181
- border: 3px solid rgba(29,172,224, .5);
182
-
183
- }
184
-
185
-
186
-
187
- .register:hover{
188
-
189
- background-color: rgb(29,172,224);
190
-
191
- }
192
-
193
-
194
-
195
- .login{
196
-
197
- background-color: rgba(236,227,35, .5);
198
-
199
- border:3px solid rgba(236,227,35, .3);
200
-
201
- }
202
-
203
-
204
-
205
- .login:hover{
206
-
207
- background-color: rgb(236,227,35);
208
-
209
- }
210
-
211
-
212
-
213
- /*welcome 終わり*/
214
-
215
-
216
-
217
- /*curriculum*/
218
-
219
- .curriculum{
220
-
221
- margin-top: 50px;
222
-
223
- }
224
-
225
-
226
-
227
- .subtitle{
228
-
229
- font-size: 36px;
230
-
231
- text-align: center;
232
-
233
- }
234
-
235
-
236
-
237
- .img-box{
238
-
239
- display: flex;
240
-
241
- justify-content: center;
242
-
243
- margin-top: 50px;
244
-
245
- }
246
-
247
-
248
-
249
- .img-box li{
250
-
251
- display: flex;
252
-
253
- flex-direction: column;
254
-
255
- text-align: center;
256
-
257
- margin: 0px 30px 0px 30px;
258
-
259
- }
260
-
261
-
262
-
263
- .img-box li img {
264
-
265
- height: 300px;
266
-
267
- width:300px;
268
-
269
- }
270
-
271
- /*curriculum終わり*/
272
-
273
-
274
-
275
- /*contact us*/
276
-
277
- .contact{
278
-
279
- text-align: center;
280
-
281
- background-color: #ebf4f5;
282
-
283
- margin-top: 50px;
284
-
285
- height: 350px;
286
-
287
- display: flex;
288
-
289
- flex-direction: column;
290
-
291
- justify-content: center;
292
-
293
- }
294
-
295
-
296
-
297
- .form{
39
+ ```CSS
298
-
299
- display: flex;
300
-
301
- justify-content: center;
302
-
303
- }
304
-
305
-
306
-
307
- .form .name,.form .email{
308
-
309
- height: 50px;
310
-
311
- width: 400px;
312
-
313
- font-size:16px;
314
-
315
- box-sizing: border-box;
316
-
317
- }
318
-
319
-
320
-
321
- .form-left{
322
-
323
- margin-right:50px;
324
-
325
- }
326
-
327
-
328
-
329
- .inquiry{
330
-
331
- height: 120px;
332
-
333
- width:400px;
334
-
335
- font-size: 16px;
336
-
337
- box-sizing: border-box;
338
-
339
- }
340
-
341
-
342
-
343
- .form .name{
344
-
345
- margin-bottom: 20px;
346
-
347
- }
348
-
349
-
350
-
351
- .contact .form{
352
-
353
- margin: 50px 0 40px;
354
-
355
- }
356
-
357
- .contact button{
358
-
359
- background-color: #1dace0;
360
-
361
- color: #fff;
362
-
363
- border:3px solid #1dace0;
364
-
365
- border-radius: 10px;
366
-
367
- font-size: 24px;
368
-
369
- padding:15px 30px;
370
-
371
- box-sizing: border-box;
372
-
373
- }
374
-
375
- /*contact usここまで*/
376
-
377
-
378
-
379
-
380
-
381
- /*footer*/
382
40
 
383
41
 
384
42
 
@@ -408,544 +66,4 @@
408
66
 
409
67
  }
410
68
 
411
-
412
-
413
- /*footer終わり*/
414
-
415
-
416
-
417
- /*レスポンシブ対応*/
418
-
419
-
420
-
421
- /*小型PC用*/
422
-
423
- @media screen and (max-width: 1280px){
424
-
425
- .img-box li{
426
-
427
- margin-right: 30px;
428
-
429
- }
430
-
431
- }
432
-
433
-
434
-
435
-
436
-
437
- /*タブレット用*/
438
-
439
- @media screen and (max-width: 960px){
440
-
441
- .imb-box li{
442
-
443
- }
444
-
445
- .img-box{
446
-
447
- display: flex;
448
-
449
- flex-flow: wrap;
450
-
451
- }
452
-
453
- .curriculum span{
454
-
455
- font-size: 25px;
456
-
457
- margin:15px 0px;
458
-
459
- }
460
-
461
- .contact .form{
462
-
463
- flex-flow: column nowrap;
464
-
465
- margin:30px;
466
-
467
- }
468
-
469
-
470
-
471
- .form .name ,.form .email,.form .inquiry{
472
-
473
- width: 80%;
474
-
475
-
476
-
477
-
478
-
479
- }
480
-
481
- .form .name ,.form .email{
482
-
483
- height: 30px;
484
-
485
- }
486
-
487
-
488
-
489
- .form .inquiry{
490
-
491
- height: 50px;
492
-
493
- }
494
-
495
- .form-left{
496
-
497
- margin-right: 0;
498
-
499
- }
500
-
501
- .form-right{
502
-
503
- margin-top: 20px;
504
-
505
- }
506
-
507
- .contact button {
508
-
509
- font-size: 20px;
510
-
511
- padding: 5px 40px;
512
-
513
- }
514
-
515
-
516
-
517
-
518
-
519
- /*スマホ用*/
520
-
521
- @media screen and (max-width: 480px){
522
-
523
- body{
524
-
525
- min-width: 375px;
526
-
527
- }
528
-
529
- /*header*/
530
-
531
-
532
-
533
- .icon{
534
-
535
- margin-left: 20px;
536
-
537
- }
538
-
539
-
540
-
541
- .icon .name{
542
-
543
- display: none;
544
-
545
- }
546
-
547
-
548
-
549
- .header-right{
550
-
551
- display: none;
552
-
553
- }
554
-
555
-
556
-
557
- /*welcome*/
558
-
559
- .title{
560
-
561
- font-size: 30px;
562
-
563
- }
564
-
565
-
566
-
567
- .guideline{
568
-
569
- font-size: 24px;
570
-
571
- margin-top: 30px;
572
-
573
- font-weight: normal;
574
-
575
- }
576
-
577
-
578
-
579
- .btn-group{
580
-
581
- display: flex;
582
-
583
- flex-flow: column nowrap;
584
-
585
- align-items: center;
586
-
587
- margin-top: 40px;
588
-
589
- }
590
-
591
-
592
-
593
- .btn{
594
-
595
- height: 48px;
596
-
597
- width: 140px;
598
-
599
- margin-left: 0px;
600
-
601
- margin-top: 20px;
602
-
603
- font-size: 24px;
604
-
605
- font-weight: bold;
606
-
607
- border-radius: 10px;
608
-
609
- }
610
-
611
-
612
-
613
- .btn:first-child{
614
-
615
- margin-top: 0;
616
-
617
- }
618
-
619
-
620
-
621
- /*curriculum*/
622
-
623
- .subtitle{
624
-
625
- font-size: 24px;
626
-
627
- }
628
-
629
-
630
-
631
- .img-box{
632
-
633
- flex-flow: column nowrap;
634
-
635
- }
636
-
637
-
638
-
639
- .img-box li{
640
-
641
- display: flex;
642
-
643
- flex-direction: column;
644
-
645
- align-items: center;
646
-
647
- margin-top: 30px;
648
-
649
- }
650
-
651
-
652
-
653
- .img-box li span{
654
-
655
- font-size: 16px;
656
-
657
- margin-top: 20px;
658
-
659
- }
660
-
661
-
662
-
663
- .img-box li:first-child{
664
-
665
- margin-top:0px;
666
-
667
- }
668
-
669
-
670
-
671
- /*contact*/
672
-
673
- .contact .form{
674
-
675
- flex-flow: column nowrap;
676
-
677
- margin:30px;
678
-
679
- }
680
-
681
-
682
-
683
- .form .name ,.form .email,.form .inquiry{
684
-
685
- width: 80%;
686
-
687
-
688
-
689
-
690
-
691
- }
692
-
693
- .form .name ,.form .email{
694
-
695
- height: 30px;
696
-
697
- }
698
-
699
-
700
-
701
- .form .inquiry{
702
-
703
- height: 50px;
704
-
705
- }
706
-
707
- .form-left{
708
-
709
- margin-right: 0;
710
-
711
- }
712
-
713
- .form-right{
714
-
715
- margin-top: 20px;
716
-
717
- }
718
-
719
- .contact button {
720
-
721
- font-size: 20px;
722
-
723
- padding: 5px 40px;
724
-
725
- }
726
-
727
- /*footer*/
728
-
729
- footer{
730
-
731
- display: flex;
732
-
733
- justify-content: center;
734
-
735
- }
736
-
737
- footer .icon{
738
-
739
- display: none;
740
-
741
- }
742
-
743
-
744
-
745
- footer .footer-right{
746
-
747
- margin-right: 0;
748
-
749
- }
750
-
751
-
752
-
753
- ```ここに言語を入力
754
-
755
- コード
69
+ ```
756
-
757
- ```<!DOCTYPE html>
758
-
759
- <html lang="ja">
760
-
761
- <head>
762
-
763
- <title>Welcome</title>
764
-
765
- <meta charset="utf-8">
766
-
767
- <meta name="viewport" content="width=divice-width,initial-scale=1.0">
768
-
769
- <link rel="stylesheet" type="text/css" href="css/reset.css">
770
-
771
- <link rel="stylesheet" type="text/css" href="css/style.css">
772
-
773
-
774
-
775
- </head>
776
-
777
- <body>
778
-
779
- <!-- header -->
780
-
781
- <header class="fixed">
782
-
783
- <!-- header left -->
784
-
785
- <div class="icon">
786
-
787
- <img src="img/seedkun.png">
788
-
789
- <span class="name"><strong>Seed</strong>Kun</span>
790
-
791
- </div>
792
-
793
- <!-- header right -->
794
-
795
- <ul class="header-right">
796
-
797
- <li>新規登録</li>
798
-
799
- <li>ログイン</li>
800
-
801
- </ul>
802
-
803
- </header>
804
-
805
- <!-- header ここまで -->
806
-
807
-
808
-
809
- <!-- welcome -->
810
-
811
- <main class="welcome" id="margin-for-fixed">
812
-
813
- <h1 class="title">Welcome</h1>
814
-
815
- <ul class="guideline">
816
-
817
- <li>Be Athletes</li>
818
-
819
- <li>Go World</li>
820
-
821
- <li>Enjoy Everything</li>
822
-
823
- </ul>
824
-
825
- <div class="btn-group">
826
-
827
- <button class="btn register">新規登録</button>
828
-
829
- <button class="btn login">ログイン</button>
830
-
831
- </div>
832
-
833
- </main>
834
-
835
- <!-- welcomeここまで -->
836
-
837
-
838
-
839
- <!-- curriculum -->
840
-
841
- <main class="curriculum">
842
-
843
- <h2 class="subtitle">Nexseed Life</h2>
844
-
845
- <ul class="img-box">
846
-
847
- <li>
848
-
849
- <img src="img/programming.jpg">
850
-
851
- <span>programming</span>
852
-
853
- </li>
854
-
855
- <li>
856
-
857
- <img src="img/english.jpg">
858
-
859
- <span>English</span>
860
-
861
- </li>
862
-
863
- <li>
864
-
865
- <img src="img/enjoy.jpg"><span>Enjoy</span>
866
-
867
- </li>
868
-
869
- </ul>
870
-
871
- </main>
872
-
873
- <!-- curriculmここまで -->
874
-
875
-
876
-
877
- <!-- contact us -->
878
-
879
- <aside class="contact">
880
-
881
- <h2 class="subtitle">Contact Us</h2>
882
-
883
- <!-- form -->
884
-
885
- <form>
886
-
887
- <div class="form">
888
-
889
- <div class="form-left">
890
-
891
- <fieldset>
892
-
893
- <input type="text" class="name" placeholder="お名前">
894
-
895
- </fieldset>
896
-
897
- <fieldset>
898
-
899
- <input type="email" class="email" placeholder="メールアドレス"required="required">
900
-
901
- </fieldset>
902
-
903
- </div>
904
-
905
- <div class="form-right">
906
-
907
- <fieldset>
908
-
909
- <textarea class="inquiry" placeholder="お問い合わせ内容"></textarea>
910
-
911
- </fieldset>
912
-
913
- </div>
914
-
915
- </div>
916
-
917
- <button>submit</button>
918
-
919
- </form>
920
-
921
- </aside>
922
-
923
- <!-- contact us ここまで -->
924
-
925
- <!-- footer -->
926
-
927
- <footer>
928
-
929
- <!-- footer 左がわ -->
930
-
931
- <div class="icon">
932
-
933
- <img src="img/seedkun.png">
934
-
935
- <span class="name"><strong>Seed</strong>Kun</span>
936
-
937
- </div>
938
-
939
- <!-- footer 右側 -->
940
-
941
- <a class="footer-right">Copyright(c)Seedkun inc</a>
942
-
943
- </footer>
944
-
945
-
946
-
947
- <!-- footerここまで -->
948
-
949
- </body>
950
-
951
- </html>