質問編集履歴

3

修正しました

2021/07/08 05:49

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
@@ -236,526 +236,270 @@
236
236
 
237
237
 
238
238
 
239
+
240
+
239
- ```CSS(mainのみ)
241
+ ```table.scss
240
-
242
+
241
- .ec-display {
243
+ .table{
242
-
243
- display: -webkit-box;
244
+
244
-
245
- display: -webkit-flex;
245
+
246
-
247
- display: -ms-flexbox;
248
-
249
- display: flex;
250
-
251
- -webkit-box-pack: center;
252
-
253
- -webkit-justify-content: center;
254
-
255
- -ms-flex-pack: center;
256
-
257
- justify-content: center;
258
-
259
- -webkit-box-align: center;
260
-
261
- -webkit-align-items: center;
262
-
263
- -ms-flex-align: center;
264
-
265
- align-items: center;
266
246
 
267
247
  }
268
248
 
269
249
 
270
250
 
271
- @media screen and (max-width: 895px) {
272
-
273
- .ec-display {
251
+ .order-table{
274
-
252
+
275
- display: block;
253
+ width: 100%;
254
+
276
-
255
+ margin-bottom: 20px;
256
+
257
+ > thead{
258
+
259
+ > tr{
260
+
261
+ > th{
262
+
263
+ padding: 10px;
264
+
265
+ border-right:$base-border;
266
+
267
+ .th:last-child{
268
+
269
+ border-right: none;
270
+
277
- }
271
+ }
272
+
273
+ }
274
+
275
+
276
+
277
+ .color{
278
+
279
+ padding: 10px;
280
+
281
+ width: 20%;
282
+
283
+ border-right:$base-border ;
284
+
285
+ text-align: center;
286
+
287
+ }
288
+
289
+ .size{
290
+
291
+ text-align: center;
292
+
293
+ @extend .color;
294
+
295
+ }
296
+
297
+ .quantity{
298
+
299
+ padding: 10px;
300
+
301
+ width: 60%;
302
+
303
+ text-align: center;
304
+
305
+
306
+
307
+
308
+
309
+ }
310
+
311
+ }
312
+
313
+ > tbody{
314
+
315
+ > tr {
316
+
317
+ >td {
318
+
319
+ text-align: center;
320
+
321
+ border-top: $base-border;
322
+
323
+ border-right:$base-border ;
324
+
325
+ > td:last-child{
326
+
327
+ border-right: none;
328
+
329
+ }
330
+
331
+ >select{
332
+
333
+ width: 100%;
334
+
335
+ padding: 0 10px;
336
+
337
+ border: $base-border;
338
+
339
+ -moz-appearance: menulist;/*ボタンダウン課題*/
340
+
341
+ -webkit-appearance: menulist;/*ボタンダウン課題*/
342
+
343
+ }
344
+
345
+ }
346
+
347
+ }
348
+
349
+
350
+
351
+ }
278
352
 
279
353
  }
280
354
 
281
355
 
282
356
 
283
- .ec-display .ec-img {
357
+ .order-link{
358
+
284
-
359
+ background-color: #4B4B4B;
360
+
285
- max-width: 400px;
361
+ width: 100%;
286
-
287
- -webkit-flex-shrink: 0;
362
+
288
-
289
- -ms-flex-negative: 0;
290
-
291
- flex-shrink: 0;
292
-
293
- height: 500px;
363
+ height: 54px;
294
-
364
+
295
- margin-top: 50px;
365
+ margin-bottom: 30px;
366
+
367
+ > a{
368
+
369
+ display: block;
370
+
371
+ text-align: center;
372
+
373
+ align-items: center;
374
+
375
+ text-transform: uppercase;
376
+
377
+ color: #fff;
378
+
379
+ line-height: 1;
380
+
381
+ padding: 18px 0;
382
+
383
+ }
296
384
 
297
385
  }
298
386
 
299
-
300
-
301
- @media screen and (max-width: 895px) {
302
-
303
- .ec-display .ec-img {
304
-
305
- max-width: 100%;
306
-
307
- margin: 0 0 10px 0;
308
-
309
- }
310
-
311
387
  }
312
388
 
313
389
 
314
390
 
391
+ /*サイズテーブル*/
392
+
393
+ .size-table{
394
+
315
- .ec-display .ec-about {
395
+ border: $base-border;
396
+
316
-
397
+ width: 100%;
398
+
399
+ >thead {
400
+
401
+
402
+
403
+ >tr{
404
+
405
+ background-color: #ECEBEB;
406
+
407
+
408
+
409
+ >th{
410
+
411
+ border-top: $base-border;
412
+
413
+ border-right: $base-border;
414
+
415
+
416
+
417
+ .size{
418
+
419
+ text-align: center;
420
+
421
+ width: 16%;
422
+
423
+ }
424
+
425
+ .chest{
426
+
427
+ width: 28%;
428
+
429
+ }
430
+
431
+ .weist{
432
+
433
+ width: 28%;
434
+
435
+ }
436
+
437
+ .height{
438
+
439
+ width: 28%;
440
+
441
+ }
442
+
443
+
444
+
445
+ }
446
+
447
+
448
+
449
+
450
+
451
+ }
452
+
453
+ }
454
+
455
+ >tbody{
456
+
457
+ >tr{
458
+
459
+ text-align: center;
460
+
461
+ width: 100%;
462
+
463
+ >th{
464
+
465
+ width: 16%;
466
+
467
+ border-right: $base-border;
468
+
469
+ border-bottom: $base-border;
470
+
317
- margin-left: 60px;
471
+ padding: 10px 0;
472
+
473
+ text-align: center;
474
+
475
+ }
476
+
477
+ >td{
478
+
479
+ border-right: $base-border;
480
+
481
+ border-bottom: $base-border;
482
+
483
+ padding: 10px 0;
484
+
485
+ text-align: center;
486
+
487
+ }
488
+
489
+
490
+
491
+ }
492
+
493
+ }
494
+
495
+
318
496
 
319
497
  }
320
498
 
321
-
322
-
323
- .ec-display .ec-about .ec-title {
324
-
325
- height: 60px;
326
-
327
- border-top: 1px solid #c3c3c3;
328
-
329
- border-bottom: 1px solid #c3c3c3;
330
-
331
- margin: 0 auto auto 60px;
332
-
333
- }
334
-
335
-
336
-
337
- @media screen and (max-width: 895px) {
338
-
339
- .ec-display .ec-about .ec-title {
340
-
341
- margin-top: 18px;
342
-
343
- padding: 0 16px;
344
-
345
- text-align: center;
346
-
347
- }
348
-
349
- }
350
-
351
-
352
-
353
- .ec-display .ec-about .ec-title > p {
354
-
355
- /*テキスト*/
356
-
357
- display: block;
358
-
359
- padding: 18px;
360
-
361
- text-align: center;
362
-
363
- font-weight: bold;
364
-
365
- }
366
-
367
-
368
-
369
- .ec-display .ec-about > p {
370
-
371
- display: block;
372
-
373
- margin-top: 20px;
374
-
375
- margin-bottom: 30px;
376
-
377
- }
378
-
379
-
380
-
381
- .ec-display .ec-about > span {
382
-
383
- margin-bottom: 40px;
384
-
385
- }
386
-
387
-
388
-
389
- .order-table {
390
-
391
- width: 100%;
392
-
393
- margin-bottom: 20px;
394
-
395
- }
396
-
397
-
398
-
399
- .order-table > thead > tr > th {
400
-
401
- padding: 10px;
402
-
403
- border-right: 1px solid #c3c3c3;
404
-
405
- }
406
-
407
-
408
-
409
- .order-table > thead > tr > th .th:last-child {
410
-
411
- border-right: none;
412
-
413
- }
414
-
415
-
416
-
417
- .order-table > thead > tr .color {
418
-
419
- padding: 10px;
420
-
421
- width: 20%;
422
-
423
- border-right: 1px solid #c3c3c3;
424
-
425
- text-align: center;
426
-
427
- }
428
-
429
-
430
-
431
- .order-table > thead > tr .size {
432
-
433
- text-align: center;
434
-
435
- }
436
-
437
-
438
-
439
- .order-table > thead > tr .quantity {
440
-
441
- padding: 10px;
442
-
443
- width: 60%;
444
-
445
- text-align: center;
446
-
447
- }
448
-
449
-
450
-
451
- .order-table > thead > tbody > tr > td {
452
-
453
- text-align: center;
454
-
455
- border-top: 1px solid #c3c3c3;
456
-
457
- border-right: 1px solid #c3c3c3;
458
-
459
- }
460
-
461
-
462
-
463
- .order-table > thead > tbody > tr > td > td:last-child {
464
-
465
- border-right: none;
466
-
467
- }
468
-
469
-
470
-
471
- .order-table > thead > tbody > tr > td > select {
472
-
473
- width: 100%;
474
-
475
- padding: 0 10px;
476
-
477
- border: 1px solid #c3c3c3;
478
-
479
- -moz-appearance: menulist;
480
-
481
- /*ボタンダウン課題*/
482
-
483
- -webkit-appearance: menulist;
484
-
485
- /*ボタンダウン課題*/
486
-
487
- }
488
-
489
-
490
-
491
- .order-table .order-link {
492
-
493
- background-color: #4B4B4B;
494
-
495
- width: 100%;
496
-
497
- height: 54px;
498
-
499
- margin-bottom: 30px;
500
-
501
- }
502
-
503
-
504
-
505
- .order-table .order-link > a {
506
-
507
- display: block;
508
-
509
- text-align: center;
510
-
511
- -webkit-box-align: center;
512
-
513
- -webkit-align-items: center;
514
-
515
- -ms-flex-align: center;
516
-
517
- align-items: center;
518
-
519
- text-transform: uppercase;
520
-
521
- color: #fff;
522
-
523
- line-height: 1;
524
-
525
- padding: 18px 0;
526
-
527
- }
528
-
529
-
530
-
531
- /*サイズテーブル*/
532
-
533
- .size-table {
534
-
535
- border: 1px solid #c3c3c3;
536
-
537
- width: 100%;
538
-
539
- }
540
-
541
-
542
-
543
- .size-table > thead > tr {
544
-
545
- background-color: #ECEBEB;
546
-
547
- }
548
-
549
-
550
-
551
- .size-table > thead > tr > th {
552
-
553
- border-top: 1px solid #c3c3c3;
554
-
555
- border-right: 1px solid #c3c3c3;
556
-
557
- }
558
-
559
-
560
-
561
- .size-table > thead > tr > th .size {
562
-
563
- text-align: center;
564
-
565
- width: 16%;
566
-
567
- }
568
-
569
-
570
-
571
- .size-table > thead > tr > th .chest {
572
-
573
- width: 28%;
574
-
575
- }
576
-
577
-
578
-
579
- .size-table > thead > tr > th .weist {
580
-
581
- width: 28%;
582
-
583
- }
584
-
585
-
586
-
587
- .size-table > thead > tr > th .height {
588
-
589
- width: 28%;
590
-
591
- }
592
-
593
-
594
-
595
- .size-table > tbody > tr {
596
-
597
- text-align: center;
598
-
599
- width: 100%;
600
-
601
- }
602
-
603
-
604
-
605
- .size-table > tbody > tr > th {
606
-
607
- width: 16%;
608
-
609
- border-right: 1px solid #c3c3c3;
610
-
611
- border-bottom: 1px solid #c3c3c3;
612
-
613
- padding: 10px 0;
614
-
615
- text-align: center;
616
-
617
- }
618
-
619
-
620
-
621
- .size-table > tbody > tr > td {
622
-
623
- border-right: 1px solid #c3c3c3;
624
-
625
- border-bottom: 1px solid #c3c3c3;
626
-
627
- padding: 10px 0;
628
-
629
- text-align: center;
630
-
631
- }
632
-
633
499
  ```
634
500
 
635
501
 
636
502
 
637
- ```ec.scss
638
-
639
- .ec{
640
-
641
-
642
-
643
-
644
-
645
- .ec-display{
646
-
647
- display: flex;
648
-
649
- justify-content: center;
650
-
651
- align-items: center;
652
-
653
- @include overTab{
654
-
655
- display: block;
656
-
657
- }
658
-
659
-
660
-
661
- .ec-img{
662
-
663
- max-width: 400px;
664
-
665
- flex-shrink: 0;
666
-
667
- height: 500px;
668
-
669
- margin-top: 50px;
670
-
671
-
672
-
673
- @include overTab{
674
-
675
- max-width: 100%;
676
-
677
- margin: 0 0 10px 0;
678
-
679
- }
680
-
681
-
682
-
683
-
684
-
685
- }
686
-
687
- .ec-about{
688
-
689
- margin-left: 60px;
690
-
691
- .ec-title{
692
-
693
-
694
-
695
- height: 60px;
696
-
697
- border-top: $base-border;
698
-
699
- border-bottom: $base-border;
700
-
701
- margin: 0 auto auto 60px;
702
-
703
-
704
-
705
- @include overTab{
706
-
707
- margin-top: 18px;
708
-
709
- padding: 0 16px;
710
-
711
- text-align: center;
712
-
713
- }
714
-
715
-
716
-
717
- >p{/*テキスト*/
718
-
719
- display: block;
720
-
721
- padding: 18px ;
722
-
723
- text-align: center;
724
-
725
- font-weight: bold;
726
-
727
- }
728
-
729
- }
730
-
731
- >p{
732
-
733
- display: block;
734
-
735
- margin-top: 20px;
736
-
737
- margin-bottom: 30px;
738
-
739
- }
740
-
741
-
742
-
743
- >span{
744
-
745
- margin-bottom: 40px;
746
-
747
- }
748
-
749
- }
750
-
751
- }
752
-
753
- }
754
-
755
- ```
756
-
757
-
758
-
759
503
  ### 試したこと
760
504
 
761
505
  ・原因追及のためにしたこと

2

修正しました

2021/07/08 05:48

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
@@ -634,6 +634,128 @@
634
634
 
635
635
 
636
636
 
637
+ ```ec.scss
638
+
639
+ .ec{
640
+
641
+
642
+
643
+
644
+
645
+ .ec-display{
646
+
647
+ display: flex;
648
+
649
+ justify-content: center;
650
+
651
+ align-items: center;
652
+
653
+ @include overTab{
654
+
655
+ display: block;
656
+
657
+ }
658
+
659
+
660
+
661
+ .ec-img{
662
+
663
+ max-width: 400px;
664
+
665
+ flex-shrink: 0;
666
+
667
+ height: 500px;
668
+
669
+ margin-top: 50px;
670
+
671
+
672
+
673
+ @include overTab{
674
+
675
+ max-width: 100%;
676
+
677
+ margin: 0 0 10px 0;
678
+
679
+ }
680
+
681
+
682
+
683
+
684
+
685
+ }
686
+
687
+ .ec-about{
688
+
689
+ margin-left: 60px;
690
+
691
+ .ec-title{
692
+
693
+
694
+
695
+ height: 60px;
696
+
697
+ border-top: $base-border;
698
+
699
+ border-bottom: $base-border;
700
+
701
+ margin: 0 auto auto 60px;
702
+
703
+
704
+
705
+ @include overTab{
706
+
707
+ margin-top: 18px;
708
+
709
+ padding: 0 16px;
710
+
711
+ text-align: center;
712
+
713
+ }
714
+
715
+
716
+
717
+ >p{/*テキスト*/
718
+
719
+ display: block;
720
+
721
+ padding: 18px ;
722
+
723
+ text-align: center;
724
+
725
+ font-weight: bold;
726
+
727
+ }
728
+
729
+ }
730
+
731
+ >p{
732
+
733
+ display: block;
734
+
735
+ margin-top: 20px;
736
+
737
+ margin-bottom: 30px;
738
+
739
+ }
740
+
741
+
742
+
743
+ >span{
744
+
745
+ margin-bottom: 40px;
746
+
747
+ }
748
+
749
+ }
750
+
751
+ }
752
+
753
+ }
754
+
755
+ ```
756
+
757
+
758
+
637
759
  ### 試したこと
638
760
 
639
761
  ・原因追及のためにしたこと

1

修正しました

2021/07/08 05:19

投稿

free_teku
free_teku

スコア103

test CHANGED
File without changes
test CHANGED
@@ -647,3 +647,21 @@
647
647
 
648
648
 
649
649
  ### 補足情報(FW/ツールのバージョンなど)
650
+
651
+
652
+
653
+ 回答受けての補足事項
654
+
655
+ ![完成品](257bce3ac8b955258260ea06df53ddf9.png)
656
+
657
+
658
+
659
+ 紫で囲んだような形にしたいのですが、できていません。
660
+
661
+
662
+
663
+ 現状↓↓
664
+
665
+ 初めは上記のようにできていたにもかかわらず、急にtableの線とボタンのCSSが機能しなくなりました。
666
+
667
+ EX.現状はボタンの背景色やtableの線が消えました。