背景の色は、基本どこも白が多いけれど、特設サイトやブランドカラーがある場合
背景にカラーを適応すると、サイトの印象がガラッと変わります。
今回は、印象的なサイトを作るための背景色変更方法を解説します。
まずは背景に色を追加してみよう！
背景に色を追加する場合「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)を指定すれば、ちゃんと作った要素が「居る」状態になるから！
以上！
コメント