質問編集履歴

2

CSS追加

2021/05/01 03:10

投稿

toshiaki4
toshiaki4

スコア1

test CHANGED
File without changes
test CHANGED
@@ -300,6 +300,12 @@
300
300
 
301
301
  /* タブレット縦置きサイズ(768px)以下の際に適用される設定 */
302
302
 
303
+ ```CSS```ここに言語を入力
304
+
305
+ コード
306
+
307
+ ```
308
+
303
309
  @media screen and (max-width: 768px) {
304
310
 
305
311
  .social i {
@@ -744,6 +750,8 @@
744
750
 
745
751
  ```
746
752
 
753
+ ```
754
+
747
755
 
748
756
 
749
757
  ### 試したこと

1

インデントが崩れていたのを訂正しました。

2021/05/01 03:10

投稿

toshiaki4
toshiaki4

スコア1

test CHANGED
File without changes
test CHANGED
@@ -12,23 +12,141 @@
12
12
 
13
13
  ```HTML
14
14
 
15
- <!DOCTYPE html>
15
+
16
-
16
+
17
+
18
+
17
- <head>
19
+ <Feature>
18
-
20
+
19
- <meta charset="UTF-8">
21
+ <div class="feature-titles">
20
-
21
- <meta name="viewport" content="width=device-width,initial-scale=1.0">
22
+
22
-
23
- <title>MySite</title>
24
-
25
- <link rel="stylesheet" href="style.css">
23
+ <div class="feature-title-a">
24
+
26
-
25
+ Feature
26
+
27
- </head>
27
+ </div>
28
+
28
-
29
+ <div class="feature-text">
30
+
31
+ it is long established fact a reader will be distracted by the readable<br>
32
+
33
+ content of a page when looking at its layout.<br>
34
+
35
+ The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters
36
+
37
+ </div>
38
+
39
+ </div>
40
+
29
- <body>
41
+ <div>
42
+
30
-
43
+ <div class="features">
44
+
31
-
45
+ <div class="feature1">
46
+
47
+ <div class="feature-img">
48
+
49
+ <img src="img/code-solid.svg" alt="" width="60px" height="60px" class="">
50
+
51
+ </div>
52
+
53
+ <div class="feature-title">
54
+
55
+ Strength1
56
+
57
+ </div>
58
+
59
+ <div>
60
+
61
+ Contrary to popular belief, Lorem Ipsum<br>
62
+
63
+ is not simply random text.It has roots<br>
64
+
65
+ in a piece of classical Latin literature<br>
66
+
67
+ from 45 BC, making it over 2000 years<br>
68
+
69
+ old Richard MacClintock, a Latin<br>
70
+
71
+ professor at Hampden-Sydney College<br>
72
+
73
+ in Virginia, looked up one of the more<br>
74
+
75
+ obscure Latin words consectetur<br>
76
+
77
+ </div>
78
+
79
+ </div>
80
+
81
+ <div class="feature2">
82
+
83
+ <div class="feature-img">
84
+
85
+ <img src="img/pc.svg" alt="" width="60px" height="60px">
86
+
87
+ </div>
88
+
89
+ <div class="feature-title">Strength2</div>
90
+
91
+ <div>
92
+
93
+ Contrary to popular belief, Lorem Ipsum<br>
94
+
95
+ is not simply random text.It has roots<br>
96
+
97
+ in a piece of classical Latin literature<br>
98
+
99
+ from 45 BC, making it over 2000 years<br>
100
+
101
+ old Richard MacClintock, a Latin<br>
102
+
103
+ professor at Hampden-Sydney College<br>
104
+
105
+ in Virginia, looked up one of the more<br>
106
+
107
+ obscure Latin words consectetur<br>
108
+
109
+ </div>
110
+
111
+ </div>
112
+
113
+ <div class="feature3">
114
+
115
+ <div class="feature-img">
116
+
117
+ <img src="img/cogs-solid.svg" alt="" width="60px" height="60px">
118
+
119
+ </div>
120
+
121
+ <div class="feature-title">Strength3</div>
122
+
123
+ <div>
124
+
125
+ Contrary to popular belief, Lorem Ipsum<br>
126
+
127
+ is not simply random text.It has roots<br>
128
+
129
+ in a piece of classical Latin literature<br>
130
+
131
+ from 45 BC, making it over 2000 years<br>
132
+
133
+ old Richard MacClintock, a Latin<br>
134
+
135
+ professor at Hampden-Sydney College<br>
136
+
137
+ in Virginia, looked up one of the more<br>
138
+
139
+ obscure Latin words consectetur<br>
140
+
141
+ </div>
142
+
143
+ </div>
144
+
145
+ </div>
146
+
147
+ </div>
148
+
149
+ </Feature>
32
150
 
33
151
  <Contact>
34
152
 
@@ -174,19 +292,11 @@
174
292
 
175
293
  </div>
176
294
 
177
- </Contact>
295
+
178
-
179
- <div class="footer">
296
+
180
-
181
- <p>©︎2017 WebCamp</p>
297
+
182
-
183
- </div>
298
+
184
-
185
- </body>```CSS
299
+ ``````CSS
186
-
187
-
188
-
189
-
190
300
 
191
301
  /* タブレット縦置きサイズ(768px)以下の際に適用される設定 */
192
302
 
@@ -198,512 +308,402 @@
198
308
 
199
309
  }
200
310
 
311
+ .main-visual-img p {
312
+
201
- body {
313
+ color: #fafafa;
314
+
202
-
315
+ text-align: center;
316
+
203
-
317
+ font-size: 18px;
318
+
204
-
319
+ padding-top: 10px;
320
+
205
- }
321
+ }
206
-
322
+
207
- .nav-link {
323
+ .main {
324
+
208
-
325
+ background-color: #ECEFF1;
326
+
327
+
328
+
329
+ }
330
+
331
+ .portfolio-title {
332
+
333
+ display: inline-block;
334
+
335
+ padding-top: 90px;
336
+
337
+ font-size: 32px;
338
+
339
+ color: #000000;
340
+
341
+ padding-bottom: 8px;
342
+
343
+ margin-bottom: 30px;
344
+
345
+ text-align: center;
346
+
347
+ margin: 0 auto;
348
+
349
+ }
350
+
351
+ .portfolio-title::after {
352
+
353
+ background-color: #EC715F;
354
+
209
- height: 50px;
355
+ height: 3px;
356
+
357
+ width: 70px;
358
+
359
+ content: "";
360
+
361
+ display: block;
362
+
363
+ margin: 8px auto 0 auto;
364
+
365
+ }
366
+
367
+ .portfolio-titles {
368
+
369
+ text-align: center;
370
+
371
+ }
372
+
373
+ .portfolio-text {
374
+
375
+ font-size: 16px;
376
+
377
+ color: #000000;
378
+
379
+ margin-bottom: 30px;
380
+
381
+ }
382
+
383
+ .portfolio {
210
384
 
211
385
  width: 100%;
212
386
 
387
+ float: center;
388
+
389
+ margin: 0 auto;
390
+
391
+ background-color: #ECEFF1;
392
+
393
+ padding-bottom: 90px;
394
+
213
- }
395
+ }
214
-
215
- .nav-link-img {
396
+
216
-
217
- height: 50px;
218
-
219
-
220
-
221
- }
222
-
223
- .nav-links {
397
+ .feature-titel {
224
-
225
- background-color: white;
226
-
227
- height: 2px;
228
-
229
- width: 25px;
230
-
231
- }
232
-
233
-
234
-
235
- .nav-link-details a{
236
-
237
- text-decoration: none;
238
-
239
- color: #FAFAFA;
240
398
 
241
399
  display: inline-block;
242
400
 
401
+ font-size: 32px;
402
+
243
- float: right;
403
+ color: #000000;
404
+
244
-
405
+ margin-top: 90px;
406
+
245
- padding: 0 30px;
407
+ padding: 8px;
408
+
246
-
409
+ margin-bottom: 30px;
410
+
247
- text-align: center;
411
+ text-align: center;
248
-
412
+
249
- padding-top: 20px;
413
+ border-bottom: solid 3px #ec715f;
250
-
414
+
251
- }
415
+ }
252
-
416
+
253
- .nav-link-details {
417
+ .features {
254
-
418
+
255
- width: 1024px;
419
+ width: 980px;
256
420
 
257
421
  margin: 0 auto;
258
422
 
423
+ padding-bottom: 90px;
424
+
259
- }
425
+ }
260
-
426
+
261
- .main-visual-img {
427
+ .feature-titles {
262
-
263
-
264
-
265
- height: 650px;
428
+
266
-
267
- background-image: url(img/code.png);
268
-
269
- background-size: cover;
429
+ text-align: center;
270
-
430
+
271
- background-position: bottom;
431
+ margin-bottom: 30px;
272
-
432
+
273
- }
433
+ }
274
-
434
+
275
- .title {
435
+ .feature-text {
276
-
277
- color: #fafafa;
436
+
278
-
279
- text-align: center;
280
-
281
- padding-top: 200px;
282
-
283
- font-size: 40px;
437
+ font-size: 16px;
438
+
284
-
439
+ color: #000000;
285
-
286
-
440
+
287
- }
441
+ }
288
-
442
+
289
- .main-image1 {
443
+ .features {
290
444
 
291
445
  display:block;
292
446
 
447
+
448
+
293
- }
449
+ }
450
+
294
-
451
+ .feature1 {
452
+
453
+ width: 320px;
454
+
455
+ height: auto;
456
+
457
+
458
+
459
+ }
460
+
461
+ .feature2 {
462
+
463
+ width: 320px;
464
+
465
+ height: auto;
466
+
467
+ margin: 0 10px;
468
+
469
+
470
+
471
+ }
472
+
473
+ .feature3 {
474
+
475
+ width: 320px;
476
+
477
+ height: auto;
478
+
479
+
480
+
481
+ }
482
+
483
+ .feature-title {
484
+
485
+ text-align: center;
486
+
487
+ font-size: 20px;
488
+
489
+ padding: 10px 0;
490
+
491
+ }
492
+
493
+
494
+
495
+ .feature-title-a {
496
+
497
+ text-align: center;
498
+
499
+ font-size: 32px;
500
+
501
+ font-weight: 600;
502
+
503
+ margin-top: 90px;
504
+
505
+ margin-bottom: 30px;
506
+
507
+ color: #000000;
508
+
509
+ padding: 10px 0;
510
+
511
+ }
512
+
513
+ .feature-title-a::after {
514
+
515
+ display: block;
516
+
517
+ content: "";
518
+
519
+ background-color:#EC715F;
520
+
521
+ height: 3px;
522
+
523
+ width: 70px;
524
+
525
+ margin: 8px auto 0 auto;
526
+
527
+ }
528
+
295
- .main-image3 {
529
+ .feature-img {
530
+
531
+ text-align: center;
532
+
533
+ }
534
+
535
+ .profiles {
536
+
537
+ background-color: #ECEFF1;
538
+
539
+
540
+
541
+ }
542
+
543
+ .profile {
544
+
545
+ font-size: 32px;
546
+
547
+ color: #000000;
548
+
549
+ padding-bottom: 8px;
550
+
551
+ margin-bottom: 30px;
552
+
553
+ text-align: center;
554
+
555
+ font-weight: 700;
556
+
557
+
558
+
559
+ }
560
+
561
+ .profile::after {
562
+
563
+ content: "";
296
564
 
297
565
  display:block;
298
566
 
299
- }
300
-
301
- .main-image6 {
302
-
303
- display:block;
304
-
305
- }
306
-
307
-
308
-
309
-
310
-
311
- .main-visual-img p {
312
-
313
- color: #fafafa;
314
-
315
- text-align: center;
316
-
317
- font-size: 18px;
318
-
319
- padding-top: 10px;
320
-
321
- }
322
-
323
- .main {
324
-
325
- background-color: #ECEFF1;
326
-
327
-
328
-
329
- }
330
-
331
- .portfolio-title {
332
-
333
- display: inline-block;
334
-
335
- padding-top: 90px;
567
+ background-color:#EC715F;
568
+
569
+ height: 3px;
570
+
571
+ width: 70px;
572
+
573
+ margin: 8px auto 0 auto;
574
+
575
+ }
576
+
577
+ .profile-text {
578
+
579
+ text-align: center;
580
+
581
+ margin-bottom: 30px;
582
+
583
+ }
584
+
585
+ .profile-bottom {
586
+
587
+ display: flex;
588
+
589
+ }
590
+
591
+ .icon-img {
592
+
593
+ border-radius: 50%;
594
+
595
+ }
596
+
597
+ .profile-bottom-text {
598
+
599
+ display: block;
600
+
601
+ text-align: center;
602
+
603
+ margin: 0 auto;
604
+
605
+
606
+
607
+ }
608
+
609
+ .myname {
610
+
611
+ width: 512px;
612
+
613
+ text-align: left;
614
+
615
+ margin-bottom: 90px;
616
+
617
+
618
+
619
+ }
620
+
621
+ .myname-title {
622
+
623
+ font-size: 20px;
624
+
625
+ padding-bottom: 5px;
626
+
627
+
628
+
629
+ }
630
+
631
+ .profile-top {
632
+
633
+
634
+
635
+ }
636
+
637
+ .icon-imgs {
638
+
639
+ width: 512px;
640
+
641
+ }
642
+
643
+ .MyName-text {
644
+
645
+ margin-bottom: 20px;
646
+
647
+ }
648
+
649
+
650
+
651
+ .contact {
652
+
653
+ margin: 90px auto;
654
+
655
+ width: 90%;
656
+
657
+
658
+
659
+
660
+
661
+ }
662
+
663
+ .contact-title {
336
664
 
337
665
  font-size: 32px;
338
666
 
667
+ font-weight: 600;
668
+
339
- color: #000000;
669
+ color: "000000";
340
-
341
- padding-bottom: 8px;
670
+
342
-
343
- margin-bottom: 30px;
671
+ margin-bottom: 30px;
344
-
345
- text-align: center;
672
+
346
-
347
- margin: 0 auto;
673
+
348
-
674
+
349
- }
675
+ }
676
+
350
-
677
+ .contact-text {
678
+
679
+ margin-bottom: 30px;
680
+
681
+ width: 90%;
682
+
683
+ }
684
+
351
- .portfolio-title::after {
685
+ .contact-title::after {
686
+
352
-
687
+ content: "";
688
+
353
- background-color: #EC715F;
689
+ background-color:#EC715F;
690
+
691
+ display: block;
692
+
693
+ margin: 8px auto 0 auto;
354
694
 
355
695
  height: 3px;
356
696
 
357
697
  width: 70px;
358
698
 
359
- content: "";
699
+
360
-
361
- display: block;
700
+
362
-
363
- margin: 8px auto 0 auto;
364
-
365
- }
701
+ }
366
-
702
+
367
- .portfolio-titles {
703
+ .contact-bottom-title {
368
-
369
- text-align: center;
370
-
371
- }
372
-
373
- .portfolio-text {
374
-
375
- font-size: 16px;
376
-
377
- color: #000000;
378
-
379
- margin-bottom: 30px;
380
-
381
- }
382
-
383
- .portfolio {
384
-
385
- width: 100%;
386
-
387
- float: center;
388
-
389
- margin: 0 auto;
390
-
391
- background-color: #ECEFF1;
392
-
393
- padding-bottom: 90px;
394
-
395
- }
396
-
397
- .feature-titel {
398
-
399
- display: inline-block;
400
-
401
- font-size: 32px;
402
-
403
- color: #000000;
404
-
405
- margin-top: 90px;
406
-
407
- padding: 8px;
408
-
409
- margin-bottom: 30px;
410
-
411
- text-align: center;
412
-
413
- border-bottom: solid 3px #ec715f;
414
-
415
- }
416
-
417
- .features {
418
-
419
- width: 980px;
420
-
421
- margin: 0 auto;
422
-
423
- padding-bottom: 90px;
424
-
425
- }
426
-
427
- .feature-titles {
428
-
429
- text-align: center;
430
-
431
- margin-bottom: 30px;
432
-
433
- }
434
-
435
- .feature-text {
436
-
437
- font-size: 16px;
438
-
439
- color: #000000;
440
-
441
- }
442
-
443
- .features {
444
-
445
- display:block;
446
-
447
-
448
-
449
- }
450
-
451
- .feature1 {
452
-
453
- width: 320px;
454
-
455
- height: auto;
456
-
457
-
458
-
459
- }
460
-
461
- .feature2 {
462
-
463
- width: 320px;
464
-
465
- height: auto;
466
-
467
- margin: 0 10px;
468
-
469
-
470
-
471
- }
472
-
473
- .feature3 {
474
-
475
- width: 320px;
476
-
477
- height: auto;
478
-
479
-
480
-
481
- }
482
-
483
- .feature-title {
484
-
485
- text-align: center;
486
704
 
487
705
  font-size: 20px;
488
706
 
489
- padding: 10px 0;
490
-
491
- }
492
-
493
-
494
-
495
- .feature-title-a {
496
-
497
- text-align: center;
498
-
499
- font-size: 32px;
500
-
501
- font-weight: 600;
502
-
503
- margin-top: 90px;
504
-
505
- margin-bottom: 30px;
506
-
507
- color: #000000;
508
-
509
- padding: 10px 0;
510
-
511
- }
512
-
513
- .feature-title-a::after {
514
-
515
- display: block;
516
-
517
- content: "";
518
-
519
- background-color:#EC715F;
520
-
521
- height: 3px;
522
-
523
- width: 70px;
524
-
525
- margin: 8px auto 0 auto;
526
-
527
- }
528
-
529
- .feature-img {
530
-
531
- text-align: center;
532
-
533
- }
534
-
535
- .profiles {
536
-
537
- background-color: #ECEFF1;
538
-
539
-
540
-
541
- }
542
-
543
- .profile {
544
-
545
- font-size: 32px;
546
-
547
- color: #000000;
548
-
549
- padding-bottom: 8px;
550
-
551
- margin-bottom: 30px;
552
-
553
- text-align: center;
554
-
555
- font-weight: 700;
556
-
557
-
558
-
559
- }
560
-
561
- .profile::after {
562
-
563
- content: "";
564
-
565
- display:block;
566
-
567
- background-color:#EC715F;
568
-
569
- height: 3px;
570
-
571
- width: 70px;
572
-
573
- margin: 8px auto 0 auto;
574
-
575
- }
576
-
577
- .profile-text {
578
-
579
- text-align: center;
580
-
581
- margin-bottom: 30px;
582
-
583
- }
584
-
585
- .profile-bottom {
586
-
587
- display: flex;
588
-
589
- }
590
-
591
- .icon-img {
592
-
593
- border-radius: 50%;
594
-
595
- }
596
-
597
- .profile-bottom-text {
598
-
599
- display: block;
600
-
601
- text-align: center;
602
-
603
- margin: 0 auto;
604
-
605
-
606
-
607
- }
608
-
609
- .myname {
610
-
611
- width: 512px;
612
-
613
- text-align: left;
614
-
615
- margin-bottom: 90px;
616
-
617
-
618
-
619
- }
620
-
621
- .myname-title {
622
-
623
- font-size: 20px;
624
-
625
- padding-bottom: 5px;
626
-
627
-
628
-
629
- }
630
-
631
- .profile-top {
632
-
633
-
634
-
635
- }
636
-
637
- .icon-imgs {
638
-
639
- width: 512px;
640
-
641
- }
642
-
643
- .MyName-text {
644
-
645
- margin-bottom: 20px;
646
-
647
- }
648
-
649
-
650
-
651
- .contact {
652
-
653
- margin: 90px auto;
654
-
655
- width: 90%;
656
-
657
-
658
-
659
-
660
-
661
- }
662
-
663
- .contact-title {
664
-
665
- font-size: 32px;
666
-
667
- font-weight: 600;
668
-
669
- color: "000000";
670
-
671
- margin-bottom: 30px;
672
-
673
-
674
-
675
- }
676
-
677
- .contact-text {
678
-
679
- margin-bottom: 30px;
680
-
681
- width: 90%;
682
-
683
- }
684
-
685
- .contact-title::after {
686
-
687
- content: "";
688
-
689
- background-color:#EC715F;
690
-
691
- display: block;
692
-
693
- margin: 8px auto 0 auto;
694
-
695
- height: 3px;
696
-
697
- width: 70px;
698
-
699
-
700
-
701
- }
702
-
703
- .contact-bottom-title {
704
-
705
- font-size: 20px;
706
-
707
707
  padding: 5px;
708
708
 
709
709
  }
@@ -742,37 +742,7 @@
742
742
 
743
743
  .contact-left-a {
744
744
 
745
-
746
-
747
-
748
-
749
- }
745
+ ```
750
-
751
- .contact-right-a {
752
-
753
- margin: 0 90px;
754
-
755
-
756
-
757
- }
758
-
759
- .footer {
760
-
761
- background-color: #ec715f;
762
-
763
- color: white;
764
-
765
- height: 60px;
766
-
767
- text-align: center;
768
-
769
- padding-top: 25px;
770
-
771
- font-size: 16px;
772
-
773
- }
774
-
775
- }
776
746
 
777
747
 
778
748