前提・実現したいこと
下記サイトの模写をしています。
(サイト:https://isara.life/)
↑見本
↑模写
※文字の色だけが反映されない状態です。
発生している問題・エラーメッセージ
一部のcssが反映されない状態です。
そのcssは「text1」クラスと「kikan-text」クラスです。
colorだけ反映されないです。font-sizeやmargin等は反映されます。
該当のソースコード
html
1<div class="otoiawase-wrapper"> 2 <div class="container2"> 3 4 <div class="otoiawase-text"> 5 <h2 class="text1"><p>まずは20日間で、</p> 6 <p>月10万円稼げるスキルを手にいれよう。</p></h2> 7 <h3><span style="background-color:white" class="text2">※受講料金は実質0円です。詳しくは資料請求をどうぞ。</span></h3> 8 </div> 9 10 <h3 class="otoiawase-btn">お問い合わせ&資料請求はこちら</h3> 11 12 <div class="kikan-text"> 13 14 15 <p>第4期生:2018年12月3日 ~ 2018年12月22日 *締め切りました</p> 16 <p>第5期生:2019年4月8日 ~ 2019年4月27日*締め切りました</p> 17 <p>第6期生:資料請求受付中です</p> 18 </div> 19 20<div class="btn-wrapper"> 21 22 <a href="#" class="btn tweet"> 23 <span class="fa fa-twitter"></span> 24 ツイート</a> 25 26 <a href="#" class="btn iine"> 27 <span class="fa fa-thumbs-up"></span> 28 いいね</a> 29 30 <a href="#" class="btn share">シェア</a> 31 </div> 32 33 </div> 34 </div> 35
css
1.otoiawase-wrapper{ 2 height: 600px; 3 background-color:#EBB94C; 4} 5 6.container2{ 7 width: 1100px; 8 margin: auto; 9 height: 600px; 10 text-align: center; 11 padding: 35px; 12} 13 14.text1{ 15 color: #ffffff; 16 font-size: 20px; 17 line-height: 35px; 18 margin-bottom: 20px; 19} 20 21.text2{ 22 background-color: white; 23 color: #C7244E; 24 font-size: 15px; 25 border-radius: 6px; 26 27 padding:5px 10px; 28} 29 30.otoiawase-btn{ 31 background-color: #DA6B63; 32 border-radius: 60px; 33 color: white; 34 font-size: 27px; 35 letter-spacing: 3px; 36 display: inline-block; 37 38 margin-top: 45px; 39 width: 945px; 40 padding: 35px 0px; 41} 42 43.kikan-text{ 44 line-height: 45px; 45 color: #ffffff; 46 font-size: 20px; 47 font-weight: bold; 48 49 margin-top: 65px; 50}
試したこと
考えられる要因
・cssのクラス名間違えている
→同じクラスで他のプロパティ反映されているので、違う
・cssとHTMLが紐づいていない
→検証ツールで紐ついていること確認できたので、違う
・全角スペースや「;」の記入漏れ
→確認しましたが記入漏れない
以上のように考え試しましたが、色が変わりません。
初歩的なところでつまずいてしまって、自分でも何が原因なのかわからないです。
お手数ですが、ご教授くださいませ。
補足情報(FW/ツールのバージョンなど)
回答2件
あなたの回答
tips
プレビュー