質問編集履歴

5

提示コードミスによる修正

2021/01/19 06:54

投稿

mitrasi
mitrasi

スコア49

test CHANGED
File without changes
test CHANGED
@@ -482,249 +482,55 @@
482
482
 
483
483
  ```css
484
484
 
485
- @import "va";
486
-
487
-
488
-
489
- * {
490
-
491
- box-sizing: border-box;
485
+ /*レスポンシブデザイン*/
492
-
493
- }
486
+
494
-
495
-
496
-
487
+
488
+
497
- /*共通レイアウト*/
489
+ /*タブットサ*/
498
-
499
- body {
490
+
500
-
501
- font-family: "Helvetic", "YuGothic";
491
+
502
-
503
- text-align: center;
492
+
504
-
505
-
506
-
507
- }
493
+
508
-
509
-
510
-
511
- img {
494
+
512
-
513
- width: 100%;
514
-
515
- vertical-align: bottom;
516
-
517
- }
518
-
519
-
520
-
521
- h2 {
522
-
523
- color: $orange;
524
-
525
- font-size: 30px;
526
-
527
- padding: 80px 0;
528
-
529
- }
530
-
531
-
532
-
533
- section {
534
-
535
- margin: 80px 0;
536
-
537
- }
538
-
539
-
540
-
541
- /* ヘッダ*/
542
-
543
-
544
-
545
- header {
546
-
547
- background-color: $orange;
495
+ @media screen and (max-width:768px) {
548
-
549
- height: 100px;
550
-
551
-
552
496
 
553
497
  .site-title {
554
498
 
555
- font-size: 40px;
499
+ font-size: 26px;
556
-
557
- line-height: 60px;
558
-
559
- color: $white;
560
-
561
- padding: 20px 0;
562
500
 
563
501
  }
564
502
 
565
- }
566
-
567
-
568
-
569
- /*はじめに*/
570
-
571
-
572
-
573
-
574
-
575
- .main-visial {
576
-
577
- background-image: url(../images/kv-img.jpg);
578
-
579
- background-size: cover;
580
-
581
- background-position: center;
582
-
583
- width: 100%;
584
-
585
- height: 400px;
586
-
587
503
 
588
504
 
589
505
  .kv-copy {
590
506
 
591
- color: $white;
592
-
593
- font-size: 30px;
507
+ font-size: 24px;
594
-
595
- padding: 155px 0;
596
-
597
- line-height: 45px;
598
508
 
599
509
  }
600
510
 
601
- }
511
+
602
-
603
-
604
-
605
- /*学習の心構え*/
512
+
606
-
607
- .bg-gray {
608
-
609
- background-color: $gray;
610
-
611
- padding-bottom: 80px;
612
-
613
- }
614
-
615
-
616
-
617
- .manabi-list {
513
+ .study-list {
618
-
514
+
619
- font-size: 16px;
515
+ display: block;
620
-
621
-
622
-
623
- .manabi-list-item {
624
-
625
- p {
626
-
627
- line-height: 24px;
628
-
629
- padding-bottom: 15px;
630
-
631
- }
632
516
 
633
517
  }
634
518
 
635
- }
519
+
636
-
637
-
638
-
639
- /*学習すること*/
520
+
640
-
641
- .content-wrapper {
521
+ .study-list-item {
642
-
643
- display: flex;
522
+
644
-
645
- max-width: 800px;
646
-
647
- margin: 0 auto;
523
+ margin: 0 auto 20px;
648
-
649
-
650
-
651
- .content-item {
652
-
653
- padding: 0 40px;
654
-
655
-
656
-
657
-
658
-
659
- p {
660
-
661
- font-weight: bold;
662
-
663
- text-align: left;
664
-
665
- }
666
524
 
667
525
  }
668
526
 
527
+
528
+
529
+ .study-list-item:last-of-type {
530
+
531
+ margin-bottom: 0;
532
+
669
- }
533
+ }
670
-
671
-
672
-
673
- /*ボタン*/
674
-
675
-
676
-
677
-
678
-
679
-
680
-
681
-
682
-
683
-
684
-
685
- .btn {
686
-
687
- margin-bottom: 120px;
688
-
689
- padding: 12px 40px;
690
-
691
- background-color: $orange;
692
-
693
- color: $white;
694
-
695
- text-decoration: none;
696
-
697
- height: 48px;
698
-
699
- width: 210px;
700
-
701
-
702
-
703
- }
704
-
705
-
706
-
707
-
708
-
709
-
710
-
711
- /*フッター*/
712
-
713
- footer {
714
-
715
- background-color: $black;
716
-
717
- color: $white;
718
-
719
- height: 48px;
720
-
721
- padding: 15px 0;
722
-
723
- display: block;
724
-
725
- text-align: center;
726
-
727
- margin-top: 128px;
728
534
 
729
535
  }
730
536
 
@@ -775,3 +581,7 @@
775
581
 
776
582
 
777
583
  上記画像の状態で、「はじめてのコーディング」などがbackground-colorからはみ出したまま、フォントサイズを変更しようにも指示が聞かない状況です。
584
+
585
+
586
+
587
+ ※解決後、提示コードのミスが発覚したため、訂正しております。ご了承くださいませ。

4

誤字修正

2021/01/19 06:54

投稿

mitrasi
mitrasi

スコア49

test CHANGED
File without changes
test CHANGED
@@ -768,8 +768,10 @@
768
768
 
769
769
  コンソールに出ているエラー表示も気になるところです。関係あるかわかりませんが????
770
770
 
771
+
772
+
771
773
  ![イメージ説明](a0c74f3f05c6cfbd95760cf173166b17.png)
772
774
 
773
775
 
774
776
 
775
- 上記画像の状態で、「はじめてのコーディング」などがbackground-colorからはみ出したまま、フォンサイズを変更しようにも指示が聞かない状況です。
777
+ 上記画像の状態で、「はじめてのコーディング」などがbackground-colorからはみ出したまま、フォンサイズを変更しようにも指示が聞かない状況です。

3

画像の追加

2021/01/19 05:26

投稿

mitrasi
mitrasi

スコア49

test CHANGED
File without changes
test CHANGED
@@ -753,3 +753,23 @@
753
753
  エディタ:Brackets
754
754
 
755
755
  ブラウザ:クローム
756
+
757
+
758
+
759
+ ### コメントを受けての追記
760
+
761
+
762
+
763
+ ①関しては、原因は不明ですがいつのまにか私の方でも解消できていたようです。
764
+
765
+ ご回答ありがとうございます。
766
+
767
+ ②関しては、私の説明力不足でどんな状態が伝えられていないところもあるかと思いますので、スクショを添付致します。
768
+
769
+ コンソールに出ているエラー表示も気になるところです。関係あるかわかりませんが????
770
+
771
+ ![イメージ説明](a0c74f3f05c6cfbd95760cf173166b17.png)
772
+
773
+
774
+
775
+ 上記画像の状態で、「はじめてのコーディング」などがbackground-colorからはみ出したまま、フォンとサイズを変更しようにも指示が聞かない状況です。

2

css(コンパイル後)提示へ変更

2021/01/19 05:19

投稿

mitrasi
mitrasi

スコア49

test CHANGED
File without changes
test CHANGED
@@ -208,11 +208,279 @@
208
208
 
209
209
 
210
210
 
211
- ### 該当のソースコード(style.scss)
211
+ ### 該当のソースコード(style.css)
212
-
213
-
214
-
212
+
213
+
214
+
215
- ```Sass
215
+ ```css
216
+
217
+ @charset "UTF-8";
218
+
219
+ @meta charset="utf-8";
220
+
221
+ @chareset "utf-8";
222
+
223
+ /*
224
+
225
+ 全体の共通レイアウト
226
+
227
+ */
228
+
229
+ * {
230
+
231
+ box-sizing: border-box;
232
+
233
+ }
234
+
235
+
236
+
237
+ html {
238
+
239
+ text-align: center;
240
+
241
+ font-family: "Helvetica", "YuGothic";
242
+
243
+ font-size: 16px;
244
+
245
+ line-height: 1.5;
246
+
247
+ }
248
+
249
+
250
+
251
+ img {
252
+
253
+ width: 100%;
254
+
255
+ vertical-align: bottom;
256
+
257
+ }
258
+
259
+
260
+
261
+ section {
262
+
263
+ padding: 80px 0;
264
+
265
+ }
266
+
267
+ section h2 {
268
+
269
+ color: #E47B12;
270
+
271
+ font-size: 30px;
272
+
273
+ margin-bottom: 50px;
274
+
275
+ font-weight: bold;
276
+
277
+ }
278
+
279
+
280
+
281
+ /*
282
+
283
+ ヘッダー
284
+
285
+ */
286
+
287
+ header {
288
+
289
+ background-color: #E47B12;
290
+
291
+ text-align: center;
292
+
293
+ padding: 20px 0;
294
+
295
+ }
296
+
297
+ header h1 {
298
+
299
+ color: #fff;
300
+
301
+ font-size: 40px;
302
+
303
+ font-weight: bold;
304
+
305
+ }
306
+
307
+
308
+
309
+ /*
310
+
311
+
312
+
313
+ トップ
314
+
315
+ */
316
+
317
+ .top-image {
318
+
319
+ background-image: url(../images/kv-img.jpg);
320
+
321
+ background-size: cover;
322
+
323
+ background-position: center;
324
+
325
+ text-align: center;
326
+
327
+ padding: 155px 0;
328
+
329
+ }
330
+
331
+ .top-image h2 {
332
+
333
+ color: #fff;
334
+
335
+ font-size: 30px;
336
+
337
+ }
338
+
339
+
340
+
341
+ /*
342
+
343
+
344
+
345
+ トップ
346
+
347
+ */
348
+
349
+ .top .p {
350
+
351
+ text-align: left;
352
+
353
+ margin: 0 auto;
354
+
355
+ }
356
+
357
+
358
+
359
+ /*
360
+
361
+ サブ
362
+
363
+ */
364
+
365
+ .sub .bg-gray {
366
+
367
+ background-color: #f0f0f0;
368
+
369
+ margin: 50px 0;
370
+
371
+ }
372
+
373
+ .sub .bg-gray .list {
374
+
375
+ line-height: 200%;
376
+
377
+ }
378
+
379
+
380
+
381
+ /*
382
+
383
+ コンテンツ
384
+
385
+ */
386
+
387
+ .content {
388
+
389
+ display: flex;
390
+
391
+ justify-content: space-between;
392
+
393
+ max-width: 800px;
394
+
395
+ margin: 0 auto 50px;
396
+
397
+ padding: 0 20px;
398
+
399
+ }
400
+
401
+ .content .content-item {
402
+
403
+ width: 240px;
404
+
405
+ }
406
+
407
+ .content p {
408
+
409
+ font-weight: bold;
410
+
411
+ text-align: left;
412
+
413
+ }
414
+
415
+
416
+
417
+ /*
418
+
419
+ ボタン
420
+
421
+ */
422
+
423
+ .btn {
424
+
425
+ background-color: #E47B12;
426
+
427
+ color: #fff;
428
+
429
+ text-decoration: none;
430
+
431
+ text-align: center;
432
+
433
+ display: block;
434
+
435
+ font-weight: bold;
436
+
437
+ margin: auto;
438
+
439
+ line-height: 48px;
440
+
441
+ width: 210px;
442
+
443
+ margin-bottom: 100px;
444
+
445
+ }
446
+
447
+
448
+
449
+ /*
450
+
451
+ /*
452
+
453
+
454
+
455
+ /*
456
+
457
+ フッター
458
+
459
+ */
460
+
461
+ footer {
462
+
463
+ background-color: #222222;
464
+
465
+ color: #fff;
466
+
467
+ line-height: 48px;
468
+
469
+ text-align: center;
470
+
471
+ font-size: 12px;
472
+
473
+ }
474
+
475
+
476
+
477
+ ```
478
+
479
+
480
+
481
+ ### 該当のソースコード(responsive.css)
482
+
483
+ ```css
216
484
 
217
485
  @import "va";
218
486
 
@@ -466,262 +734,6 @@
466
734
 
467
735
 
468
736
 
469
- ### 該当のソースコード(responsive.css)
470
-
471
- ```css
472
-
473
- @import "va";
474
-
475
-
476
-
477
- * {
478
-
479
- box-sizing: border-box;
480
-
481
- }
482
-
483
-
484
-
485
- /*共通レイアウト*/
486
-
487
- body {
488
-
489
- font-family: "Helvetic", "YuGothic";
490
-
491
- text-align: center;
492
-
493
-
494
-
495
- }
496
-
497
-
498
-
499
- img {
500
-
501
- width: 100%;
502
-
503
- vertical-align: bottom;
504
-
505
- }
506
-
507
-
508
-
509
- h2 {
510
-
511
- color: $orange;
512
-
513
- font-size: 30px;
514
-
515
- padding: 80px 0;
516
-
517
- }
518
-
519
-
520
-
521
- section {
522
-
523
- margin: 80px 0;
524
-
525
- }
526
-
527
-
528
-
529
- /* ヘッダ*/
530
-
531
-
532
-
533
- header {
534
-
535
- background-color: $orange;
536
-
537
- height: 100px;
538
-
539
-
540
-
541
- .site-title {
542
-
543
- font-size: 40px;
544
-
545
- line-height: 60px;
546
-
547
- color: $white;
548
-
549
- padding: 20px 0;
550
-
551
- }
552
-
553
- }
554
-
555
-
556
-
557
- /*はじめに*/
558
-
559
-
560
-
561
-
562
-
563
- .main-visial {
564
-
565
- background-image: url(../images/kv-img.jpg);
566
-
567
- background-size: cover;
568
-
569
- background-position: center;
570
-
571
- width: 100%;
572
-
573
- height: 400px;
574
-
575
-
576
-
577
- .kv-copy {
578
-
579
- color: $white;
580
-
581
- font-size: 30px;
582
-
583
- padding: 155px 0;
584
-
585
- line-height: 45px;
586
-
587
- }
588
-
589
- }
590
-
591
-
592
-
593
- /*学習の心構え*/
594
-
595
- .bg-gray {
596
-
597
- background-color: $gray;
598
-
599
- padding-bottom: 80px;
600
-
601
- }
602
-
603
-
604
-
605
- .manabi-list {
606
-
607
- font-size: 16px;
608
-
609
-
610
-
611
- .manabi-list-item {
612
-
613
- p {
614
-
615
- line-height: 24px;
616
-
617
- padding-bottom: 15px;
618
-
619
- }
620
-
621
- }
622
-
623
- }
624
-
625
-
626
-
627
- /*学習すること*/
628
-
629
- .content-wrapper {
630
-
631
- display: flex;
632
-
633
- max-width: 800px;
634
-
635
- margin: 0 auto;
636
-
637
-
638
-
639
- .content-item {
640
-
641
- padding: 0 40px;
642
-
643
-
644
-
645
-
646
-
647
- p {
648
-
649
- font-weight: bold;
650
-
651
- text-align: left;
652
-
653
- }
654
-
655
- }
656
-
657
- }
658
-
659
-
660
-
661
- /*ボタン*/
662
-
663
-
664
-
665
-
666
-
667
-
668
-
669
-
670
-
671
-
672
-
673
- .btn {
674
-
675
- margin-bottom: 120px;
676
-
677
- padding: 12px 40px;
678
-
679
- background-color: $orange;
680
-
681
- color: $white;
682
-
683
- text-decoration: none;
684
-
685
- height: 48px;
686
-
687
- width: 210px;
688
-
689
-
690
-
691
- }
692
-
693
-
694
-
695
-
696
-
697
-
698
-
699
- /*フッター*/
700
-
701
- footer {
702
-
703
- background-color: $black;
704
-
705
- color: $white;
706
-
707
- height: 48px;
708
-
709
- padding: 15px 0;
710
-
711
- display: block;
712
-
713
- text-align: center;
714
-
715
- margin-top: 128px;
716
-
717
- }
718
-
719
-
720
-
721
- ```
722
-
723
-
724
-
725
737
  ### 試したこと
726
738
 
727
739
 

1

CSS→Sass 表記変更

2021/01/18 10:13

投稿

mitrasi
mitrasi

スコア49

test CHANGED
File without changes
test CHANGED
@@ -208,11 +208,11 @@
208
208
 
209
209
 
210
210
 
211
- ### 該当のソースコード(style.css)
211
+ ### 該当のソースコード(style.scss)
212
-
213
-
214
-
212
+
213
+
214
+
215
- ```CSS
215
+ ```Sass
216
216
 
217
217
  @import "va";
218
218