###前提・実現したいこと
progateにてhtml&cssを勉強中
cssでbackground-colorを表示させたい
現在:子boxにfloat:leftを指定しています。
親boxにてbackground-colorを表示させたいのですが子boxの背景が反映されません
親boxにてclear:bothまたはclear:leftを試してみたのですが反映されませんでした
どのようにしたらきちんと背景カラーが表示されるでしょうか。
ちなみに、親boxにはheightを指定しないで背景カラーを表示させたいです。
###該当のソースコード
<div class="course"> <div class="container"> <div class="course-container"><h2>コースを選ぶ</h2> <div class="course-contents"> <p class="time-course">短期集中2週間コース</p> <p class="money">3万円</p> <p class="time">期間:2週間</p> <p class="chat">チャットでの質問:○</p> <p class="office">オフィスでの質問:○</p> <div class="course-btn"><a href=#>申し込む</a></div> </div><!--course-contentsクラスの終了--> <div class="course-contents"> <p class="time-course-month">通常1ヶ月コース</p> <p class="money">5万円</p> <p class="time">期間:1ヶ月</p> <p class="chat">チャットでの質問:○</p> <p class="office">オフィスでの質問:○</p> <div class="course-btn"><a href=#>申し込む</a></div> </div><!--course-contentsクラスの終了--> <div class="course-contents"> <p class="time-course">土日開発2ヶ月コース</p> <p class="money">8万円</p> <p class="time">期間:2ヶ月</p> <p class="chat">チャットでの質問:○</p> <p class="office">オフィスでの質問:○</p> <div class="course-btn"><a href=#>申し込む</a></div> </div><!--course-contentsクラスの終了--> </div><!--corse-containerクラス終了--> </div><!--containerクラス終了--> </div><!--courseID終了-->
###試したこと
.course-container{
display:block;
clear:left;
background-color:#f4f4f4; /表示させたい背景カラー/
}
.course-container h2{ /.course-container h2までしか背景カラーが表示されませんでした/
font-size:32px;
color:#555;
font-weight:normal;
text-align:center;
padding-top:80px;
padding-bottom:30px;
}
.course-contents{
background-color:white;
box-shadow:0 1px 2px rgba(0,0,0,0.2);
/* margin-bottom:100px;*/
width:28%;
padding:15px 15px 0 15px;
margin: 0 14px;
float:left;
}
.time-course{
font-size:24px;
color:white;
background-color:#323a45;
padding:30px 0;
text-align:center;
}
.money{
font-size:28px;
text-align:center;
padding:30px 0;
background-color:#f0f0f0;
}
.time{
font-size:16px;
color:#888;
text-align:center;
padding:45px 0 25px 0;
border-bottom:1px solid rgba(0,0,0,0.2);
margin:0 30px;
}
.chat{
font-size:16px;
color:#888;
text-align:center;
padding:45px 0 25px 0;
border-bottom:1px solid rgba(0,0,0,0.2);
margin:0 30px;
}
.office{
font-size:16px;
color:#888;
text-align:center;
padding:45px 0 25px 0;
border-bottom:1px solid rgba(0,0,0,0.2);
margin:0 30px;
}
.course-btn a{
font-size:18px;
font-weight:bold;
padding:10px 20px;
background-color:#323a45;
color:rgba(250,250,250,0.7);
display:inline-block;/inline-block要素にしないとcourse-btnクラスが指定できない/
transition:color 0.3s;
margin:40px 0; /margin:0 auto指定できない/
}
.course-btn a:hover{
color:white;
}
.course-btn{
text-align:center;/これで申し込むボタンを真ん中に表示できる/
}
.time-course-month{
font-size:24px;
color:white;
background-color:#0dc0c0;
padding:30px 0;
text-align:center;
}
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

回答1件
あなたの回答
tips
プレビュー