Q&A
料金の下の表のCSSが機能しない、と言われても回答者には質問者が想定する「CSSが機能した状態」がどのようなものなのかわかりません。
どのような動きを想定していて、実際にはどのような問題があるのかを記述してください。
前提・実現したいこと
Q.size表を書き終わったとたんに、料金の下の表のCSSが機能しない機能させたい！！
発生している問題・エラーメッセージ
特にありません。
該当のソースコード
HTML
1 <main class="main"> 2 <section class="EC wrapper"> 3 <div class="ec-display"> 4 <div class="ec-img"> 5 <img src="./img/Kawasan Fall.jpeg" alt="Kawasan"> 6 </div> 7 <div class="ec-about"> 8 <div class="ec-title"> 9 <p>TOTALLY Short Sleeve Shirt</p> 10 </div> 11 <p>テキストテキストテキストテキストテキストテキストテキスト 12 テキストテキストテキストテキストテキストテキストテキスト 13 テキストテキストテキストテキストテキストテキストテキスト 14 テキストテキストテキストテキストテキストテキストテキスト 15 テキストテキストテキストテキストテキストテキストテキスト 16 テキストテキストテキスト 17 </p> 18 <span class="price">￥9,999 +tax</span> 19 <table class="order-table"> 20 <thead> 21 <tr> 22 <th class="color">Color</th> 23 <th class="size">Size</th> 24 <th class="quantity">Quantity</th> 25 </tr> 26 </thead> 27 <tbody> 28 <!--1--> 29 <tr> 30 <td>White</td> 31 <td>S</td> 32 <td> 33 <select name="quantity" id="quantity_s"> 34 <option value="1" class="">1</option> 35 <option value="2" class="">2</option> 36 <option value="3" class="">3</option> 37 </select> 38 </td> 39 </tr> 40 <!--2--> 41 <tr> 42 <td>White</td> 43 <td>M</td> 44 <td> 45 <select name="quantity" id="quantity_m"> 46 <option value="1" class="">1</option> 47 <option value="2" class="">2</option> 48 <option value="3" class="">3</option> 49 </select> 50 </td> 51 </tr> 52 <tr> 53 <td>White</td> 54 <td>LL</td> 55 <td> 56 <select name="quantity" id="quantity_l"> 57 <option value="1" class="">1</option> 58 <option value="2" class="">2</option> 59 <option value="3" class="">3</option> 60 </select> 61 </td> 62 </tr> 63 64 </tbody> 65 </table> 66 <div class="order-link"> 67 <a href="#">add to cart</a> 68 </div> 69 70 <table class="size-table"> 71 <thead> 72 <tr> 73 <th class="size">Size</th> 74 <th class="chest">Chest</th> 75 <th class="weist">Weist</th> 76 <th class="height">Height</th> 77 </tr> 78 </thead> 79 80 <tbody> 81 <tr> 82 <th>S</th> 83 <td>99~99</td> 84 <td>99~99</td> 85 <td>99~99</td> 86 </tr> 87 <tr> 88 <th>M</th> 89 <td>99~99</td> 90 <td>99~99</td> 91 <td>99~99</td> 92 </tr> 93 <tr> 94 <th>L</th> 95 <td>99~99</td> 96 <td>99~99</td> 97 <td>99~99</td> 98 </tr> 99 </tbody> 100 </div> 101 </div> 102 </div> 103 </section> 104 </main>
table.scss
1.table{ 2 3} 4 5.order-table{ 6 width: 100%; 7 margin-bottom: 20px; 8 > thead{ 9 > tr{ 10 > th{ 11 padding: 10px; 12 border-right:$base-border; 13 .th:last-child{ 14 border-right: none; 15 } 16 } 17 18 .color{ 19 padding: 10px; 20 width: 20%; 21 border-right:$base-border ; 22 text-align: center; 23 } 24 .size{ 25 text-align: center; 26 @extend .color; 27 } 28 .quantity{ 29 padding: 10px; 30 width: 60%; 31 text-align: center; 32 33 34 } 35 } 36 > tbody{ 37 > tr { 38 >td { 39 text-align: center; 40 border-top: $base-border; 41 border-right:$base-border ; 42 > td:last-child{ 43 border-right: none; 44 } 45 >select{ 46 width: 100%; 47 padding: 0 10px; 48 border: $base-border; 49 -moz-appearance: menulist;/*ボタンダウン課題*/ 50 -webkit-appearance: menulist;/*ボタンダウン課題*/ 51 } 52 } 53 } 54 55 } 56} 57 58.order-link{ 59 background-color: #4B4B4B; 60 width: 100%; 61 height: 54px; 62 margin-bottom: 30px; 63 > a{ 64 display: block; 65 text-align: center; 66 align-items: center; 67 text-transform: uppercase; 68 color: #fff; 69 line-height: 1; 70 padding: 18px 0; 71 } 72} 73} 74 75/*サイズテーブル*/ 76.size-table{ 77 border: $base-border; 78 width: 100%; 79 >thead { 80 81 >tr{ 82 background-color: #ECEBEB; 83 84 >th{ 85 border-top: $base-border; 86 border-right: $base-border; 87 88 .size{ 89 text-align: center; 90 width: 16%; 91 } 92 .chest{ 93 width: 28%; 94 } 95 .weist{ 96 width: 28%; 97 } 98 .height{ 99 width: 28%; 100 } 101 102 } 103 104 105 } 106 } 107 >tbody{ 108 >tr{ 109 text-align: center; 110 width: 100%; 111 >th{ 112 width: 16%; 113 border-right: $base-border; 114 border-bottom: $base-border; 115 padding: 10px 0; 116 text-align: center; 117 } 118 >td{ 119 border-right: $base-border; 120 border-bottom: $base-border; 121 padding: 10px 0; 122 text-align: center; 123 } 124 125 } 126 } 127 128}
試したこと
・原因追及のためにしたこと
「表作成 コードリセット」検索→未解決
・「table code reset」検索→未解決
補足情報（FW/ツールのバージョンなど）
回答受けての補足事項
紫で囲んだような形にしたいのですが、できていません。
現状↓↓
初めは上記のようにできていたにもかかわらず、急にtableの線とボタンのCSSが機能しなくなりました。
EX.現状はボタンの背景色やtableの線が消えました。
回答1件
0
ベストアンサー
なぜCSSがこのようになっているか理由は分かりませんが、CSSセレクタが間違っているからCSSが適用されていないだけですね。
CSSセレクタについて学習しましょう。
css
1/* 誤: .order-table > thead > tr > th .th:last-child { */ 2.order-table > thead > tr > th:last-child { 3 border-right: none; 4} 5 6.order-table > thead > tr .color { 7 padding: 10px; 8 width: 20%; 9 border-right: 1px solid #c3c3c3; 10 text-align: center; 11} 12 13.order-table > thead > tr .size { 14 text-align: center; 15} 16 17.order-table > thead > tr .quantity { 18 padding: 10px; 19 width: 60%; 20 text-align: center; 21} 22 23/* 誤: .order-table > thead > tbody > tr > td { */ 24.order-table > tbody > tr > td { 25 text-align: center; 26 border-top: 1px solid #c3c3c3; 27 border-right: 1px solid #c3c3c3; 28} 29 30/* 誤: .order-table > thead > tbody > tr > td > td:last-child { */ 31.order-table > tbody > tr > td:last-child { 32 border-right: none; 33} 34 35/* 誤: .order-table > thead > tbody > tr > td > select { */ 36.order-table > tbody > tr > td > select { 37 width: 100%; 38 padding: 0 10px; 39 border: 1px solid #c3c3c3; 40 -moz-appearance: menulist; 41 /*ボタンダウン課題*/ 42 -webkit-appearance: menulist; 43 /*ボタンダウン課題*/ 44} 45 46/* 誤: .order-table .order-link { */ 47.order-link { 48 background-color: #4B4B4B; 49 width: 100%; 50 height: 54px; 51 margin-bottom: 30px; 52} 53 54/* 誤: .order-table .order-link > a { */ 55.order-link > a { 56 display: block; 57 text-align: center; 58 -webkit-box-align: center; 59 -webkit-align-items: center; 60 -ms-flex-align: center; 61 align-items: center; 62 text-transform: uppercase; 63 color: #fff; 64 line-height: 1; 65 padding: 18px 0; 66}
投稿2021/07/07 10:46
編集2021/07/07 10:49総合スコア4524
きれいにまとめていただき、ありがとうございます。
Scssでコードを書いていますが,どこが間違っているのか理解できていません。下記のサイトをみましたが
「＆」を使っていない箇所はあるものの、どこが間違っているのでしょうか？
(scssではいちいち毎回class名などを書かないことが魅力だと思いますが、、)
質問文に追加された一番下のコードがsassですか？ そのコードには .order-table に関する記述が存在しないため、そもそもそのsassから質問文のcssを生成できないように思えますが……。
質問と関係ないですがこういうときにgitでバージョン管理してあると「正しく表示されていた頃と現在のソースの差」を確認できたりするので、何を変えてしまったのか分かって便利です。
失礼いたしました。別のsassです。貼りなおしました。宜しくお願い致します
`> thead{`に対する`}`が本来必要な位置に存在しないため、以降の要素がtheadの子であると解釈されているようです。
VSCodeなどには対応する括弧を表示してくれる機能があるので活用してみましょう。
治りました。
ひとつのミスが動かない原因を痛感しました。
書き方を修正する必要があるかと感じています。
ku___ra__geさんはどんな書き方をしていますか？
私は下記のように書いています。
1全体のデザインを把握して、共通項を確認する。→見つけられたものは先に書きだす。
その後、sectionごとに共通項とイメージを掴む。何をどんなふうに囲むことがいいのか考えます。→書く
といった感じです。
・scssで書いていますが、インポートはそのセクションを書き始める時に書きます。
そういった手順でいいと思います。
あとは以下のように問題の原因を追い詰めていけるといいですね。
目的の表示がされない。
↓
表示されない原因は？目的の要素にcssが適用されてない。
↓
適用されない原因は？適用されるはずのcssが存在しない。
↓
適用されるはずのcssが存在しない原因は？
そのcssに該当する部分がsassには存在するけど、正しいcssが出力されていない。
↓
正しいcssが出力されていない原因は？
そのcssの周囲のsass記述がおかしいはずだ。
バージョン管理してあると、この問題の原因を追い詰めるのが楽になります。
なぜなら問題の原因は「正しく表示されていたときから現在までに変更した部分」のどこかにあり、バージョン管理してあれば「変更した部分」を簡単に確認できるからです。
そうですよね。完成してる時としない時の違いを算出できれば、素早く原因追及できると感じます。
ただ、バージョン管理は作成する段階ではかのなのでしょうか？
バージョン管理は私フェーズだと「経験を積み続ける」手段にしかいいかえれません。なので質問しました。
あなたの回答
tips
プレビュー
