前提・実現したいこと
.planの3つ目のみ 強調させて少し上へひょっこり抜け出したい
発生している問題・エラーメッセージ
コンパイルされているのに、反応されない
試したこと
scssの&-使い方を確認し、develop toolで確認するも反応してない
自身のcssを確認すると、私が思った通りにコンパイルされている。
該当のソースコード
HTML
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <section class="system"> <section class="table"> <h3>料金表</h3> <div class="conatiner"> <div class="cost-table"> <ul class="table-list"> <li class="table-item"> <div class="plan"> 基礎プラン </div><!-- /.plan --> <div class="plan-content"> <div class="money"> <h3>59,000</h3> <p class="no-tax">*月額(税抜価格)</p><!-- /.no-tax --> </div><!-- /.money --> <ul class="desc-list"> <li class="desc-item">カリキュラム作成</li><!-- /.desc-item --> <li class="desc-item">TOEFL学習サポート</li><!-- /.desc-item --> <li class="desc-item">週一回のビデオMTG</li><!-- /.desc-item --> </ul><!-- /.desc-list --> </div><!-- /.desc --> </li><!-- /.table-item --> <li class="table-item"> <div class="plan"> 演習プラン </div><!-- /.plan --> <div class="plan-content"> <div class="money"> <h3>75,000</h3> <p class="no-tax">*月額(税抜価格)</p><!-- /.no-tax --> </div><!-- /.money --> <ul class="desc-list"> <li class="desc-item">カリキュラム作成</li><!-- /.desc-item --> <li class="desc-item">TOEFL学習サポート</li><!-- /.desc-item --> <li class="desc-item">週一回のビデオMTG</li><!-- /.desc-item --> <li class="desc-item">月二回の模試(解説付き)</li><!-- /.desc-item --> </ul><!-- /.desc-list --> </div><!-- /.desc --> </li><!-- /.table-item --> <li class="table-item"> <div class="plan"> おすすめ<br> 志望校対策プラン </div><!-- /.plan --> <div class="plan-content"> <div class="money"> <h3>95,000</h3> <p class="no-tax">*月額(税抜価格)</p><!-- /.no-tax --> </div><!-- /.money --> <ul class="desc-list"> <li class="desc-item">カリキュラム作成</li><!-- /.desc-item --> <li class="desc-item">TOEFL学習サポート</li><!-- /.desc-item --> <li class="desc-item">週一回のビデオMTG</li><!-- /.desc-item --> <li class="desc-item">月二回の模試(解説付き)</li><!-- /.desc-item --> <li class="desc-item">週一の英語面接対策</li><!-- /.desc-item --> </ul><!-- /.desc-list --> </div><!-- /.desc --> </li><!-- /.table-item --> <li class="table-item"> <div class="plan"> フレックス </div><!-- /.plan --> <div class="plan-content"> <div class="money"> <h3>60,000</h3> <p class="no-tax">*月額(税抜価格)</p><!-- /.no-tax --> </div><!-- /.money --> <ul class="desc-list"> <li class="desc-item2">*別途ご相談ください</li><!-- /.desc-item --> </ul><!-- /.desc-list --> </div><!-- /.desc --> </li><!-- /.table-item --> </ul><!-- /.table-list --> </div><!-- /.cost-table --> </div><!-- /.container --> </section><!-- /.table --> </body> </html>
css
.table .container { max-width: 960px; padding: 0px 30px; } .table .cost-table .table-list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .table .cost-table .table-list .table-item { width: 200px; height: 475px; border: .5px solid #1B224C; margin-left: 7px; } .table .cost-table .table-list .table-item .plan { display: block; background-color: #1B224C; text-align: center; color: #fff; width: 220px; height: 60px; font-size: 16px; font-weight: bold; line-height: 2; } .table .cost-table .table-list .table-item .plan:nth-child(3) { background-color: #F5A623; width: 200px; height: 96px; padding-top: 20px; padding-bottom: 20px; color: #fff; text-align: center; } .table .cost-table .table-list .table-item .plan:nth-child(3) br { padding-bottom: 19px; } .table .cost-table .table-list .table-item .money h3 { color: #1B224C; font-size: 2.5rem; padding: 30px 0px 14px; margin: 0px; } .table .cost-table .table-list .table-item .money .no-tax { color: #1B224C; padding-bottom: 50px; text-align: center; } .table .cost-table .table-list .table-item .desc-list { padding: 30px 15px 25px 15px; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .table .cost-table .table-list .table-item .desc-list .desc-item { padding-bottom: 20px; } .table .cost-table .table-list .table-item .desc-list .desc-item::before { content: ""; display: inline-block; width: 10px; height: 5px; top: 5px; left: -15px; border-left: 3px solid #1b224c; border-bottom: 3px solid #1b224c; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); margin-right: 10px; margin-bottom: 10px; vertical-align: middle; }
追記
CSS
.table .cost-table .table-list .table-item .plan { display: block; background-color: #1B224C; text-align: center; color: #fff; width: 220px; height: 60px; font-size: 16px; font-weight: bold; line-height: 2; } .table .cost-table .table-list .table-item .plan:nth-of-child(3) { background-color: #F5A623; width: 200px; height: 96px; padding-top: 20px; padding-bottom: 20px; color: #fff; text-align: center; } .table .cost-table .table-list .table-item .plan:nth-of-child(3) br { padding-bottom: 19px; }
>scssの
質問タグつけましょう。
CSSしている人全てがSCSSもしているわけではありません。
まだ回答がついていません
会員登録して回答してみよう