CSSで背景に色を設定する方法

CSSで背景に色を設定する方法 CSS
この記事は約3分で読めます。
スポンサーリンク

背景の色は、基本どこも白が多いけれど、特設サイトやブランドカラーがある場合
背景にカラーを適応すると、サイトの印象がガラッと変わります。
今回は、印象的なサイトを作るための背景色変更方法を解説します。

まずは背景に色を追加してみよう!

背景に色を追加する場合「background-color」プロパティを追加します。
色を指定する要素をHTMLで設置します。

【HTML】

<div class="bg-color"></div>

【CSS】

.bg-color {
width: 100%;
height: 300px;
display: block;
background-color: pink;
}

【DEMO】

ちゃんと【DEMO】ピンク色のbackground-colorが反映されました。
では、なぜCSSに「background-color」以外の記述も書いているのか。
HTMLの「<div>」には幅や高さが無く「background-color」だけでは、ピンク色は塗られません。
下に「background-color」だけの記述を書いたCSSの【DEMO】を載せます。
【CSS】

.bg-color {
background-color: pink;
}

【DEMO】

これだと幅と高さを持たない要素に色を付けても何も表示されません。
ただ。
この、「.bg-color」の中に何か要素があるとどうでしょうか?
「background-color」だけを記述した同じCSSを下の【DEMO】に表示します。
【DEMO】

ここの背景は何色?

ちゃんとピンクが表示されました。
要素があるから色が表示された?幅も高さも…もう訳が分からないよね。
この、「幅も高さも持たない要素」というのが初めのうちはとっても理解しにくい。
ウェブ制作を一人で学習していて、ちゃんと表示されないとイラついて諦めがちだから
この「不思議な要素」をちゃんと理解しなきゃ前には進めない気がします。
HTMLとCSSで幅も高さもない要素はこの他にもこんな要素があります。
【HTML】
・<span></span>
・<a href=””></a>
【CSS】
・display: inline;
・display: none;
・position: absolute;
・position: fixed;

全然違う記述で訳が分かんないけど、まだあきらめるのは早い。
表示されない要素がある時、とりあえずCSSに下を追加して。
【CSS】

.youso {
display: block;
}

この記述が無いと、幅と高さを指定したのにやっぱり表示されないじゃん!なんてことになりがち。
後は、幅(width)と高さ(height)を指定すれば、ちゃんと作った要素が「居る」状態になるから!
以上!

SNSフォローボタン
エンデ・バタローをフォローする
CSS

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました