2021-08-20

【CSS】background-colorが効かない原因5選｜背景色が反映されない時の対処法

今回は、「background-color が効かない原因と対処法」について紹介します。

CSSを書いていると、

背景色を指定したのに反映されない
一部分だけ色がつかない
なぜか透明になってしまう

といった経験をしたことがある人も多いのではないでしょうか？

実は、background-color が効かない原因はいくつかあり、CSS初心者がつまずきやすいポイントでもあります。

この記事では、背景色が反映されない主な原因と、その解決方法について分かりやすく解説していきます！

background-color が効かない主な原因

背景色の background-color が効かない原因は、主に以下のようなものがあります。

width・height が適切に指定されていない
CSSの優先順位が低い
z-index の重なり順がおかしい
要素自体に高さがない
display の影響を受けている
background-color が上書きされている
opacity が指定されている
親要素の影響を受けている

それぞれ詳しく見ていきましょう！

widthとheightのどちらの値が指定されていない場合

背景色を指定したい要素に、width や height が適切に設定されていない場合、背景色が見えないことがあります。

例えば以下のようなコードです。

.box {
  background-color: red;
}

<div class="box"></div>

この場合、中身が空なので高さがなく、背景色が表示されません。

対処法

height を指定することで解決できます。

.box {
  width: 200px;
  height: 200px;
  background-color: red;
}



CSSの優先順位が低い場合

CSSには「優先順位」があります。

別のCSSで背景色が上書きされている場合、background-color が効かないことがあります。

例えば以下のようなケースです。

.box {
background-color: red;
}

div {
background-color: blue;
}

読み込み順によっては、青色が優先される場合があります。

対処法

Google Chrome の「デベロッパーツール」を使って、どのCSSが適用されているか確認しましょう。

デベロッパーツールの開き方

Windows：F12
Mac：command + option + I

適用されているCSSには打ち消し線が表示されるので、原因を見つけやすくなります。

z-indexの重なり順がおかしい場合

z-index が原因で、背景色を指定した要素が別要素の裏側に隠れていることがあります。

.box {
  position: relative;
  z-index: 1;
  background-color: red;
}

.overlay {
  position: absolute;
  z-index: 10;
  background-color: black;
}

この場合、.overlay が前面に表示されるため、.box の背景色が見えなくなります。

対処法

z-index の数値を確認する
position が指定されているか確認する
要素の重なり順を整理する

要素に高さがない場合

特に float を使っている場合に多いのですが、親要素の高さがなくなって背景色が表示されないことがあります。

.parent {
  background-color: yellow;
}

.child {
  float: left;
}

子要素が float すると、親要素の高さが消えてしまうことがあります。

対処法

clearfix を使うか、display: flow-root; を指定しましょう。

.parent {
  background-color: yellow;
  display: flow-root;
}


display の影響を受けている場合display: inline; の要素は、高さや幅がうまく効かない場合があります。
span {
  background-color: red;
}
inline要素では、余白やサイズの扱いが block要素と異なります。
 
対処法必要に応じて inline-block や block を指定しましょう。

span {
  display: inline-block;
  background-color: red;
}

 

.parent {
  background-color: yellow;
  display: flow-root;
}
 
 