質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1270閲覧

css : background-colorの表示

kotori_00

総合スコア46

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/10/14 13:21

###前提・実現したいこと
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/ツール等のバージョンなど)
より詳細な情報

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/10/14 18:02

コードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
guest

回答1

0

ベストアンサー

.course-containerclear:left;を取って以下のCSSを追加してみてください。
いわゆるclearfixというやつです。

css

1.course-container:after { 2 display: block; 3 clear: both; 4 content: ""; 5}

投稿2016/10/14 14:18

gin

総合スコア2722

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問