2021-08-20

【CSS】背景色のbackground-colorが効かない原因と対処法

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

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

もし背景色が効かなくて悩んでいる人がいたら、是非チェックしてみてください！

背景色を指定したい箇所に、widthとheightのどちらかの値が指定されていない場合は、背景色が効かなくなります。

この場合は、widthとheightの値を確認してみましょう！

2つ目は、CSSの優先順位が低い場合です。

この場合は、「Googleデベロッパーツール」を使って、CSSの優先順位を確認しましょう！

widthとheightの値がしっかり指定されていても、CSSの優先順位が低いとちゃんと背景色が反映されないので、注意してください。

3つ目は、z-indexの重なり順がおかしい場合です。

z-indexとは、要素の重なり順を指定することができるプロパティのことです。

ちゃんと思った通りの要素の重なり順なのか、一度確認してみましょう！

まとめ

以上が、「背景色のbackground-colorが効かない原因と対処法」でした。

DOWNLOAD

ブログ用WordPressテーマを無料配布中

実務で使える構成・設計をベースにしたテーマです。
すぐにブログ運用を始めたい方はこちらからダウンロードできます。

Webサイトの集客や導線設計でお悩みではありませんか？

当社では、データ分析（GA4・検索データ）をもとに、
成果につながるWeb制作・改善をご提案しています。

課題の整理からでも大丈夫ですので、まずはお気軽にご相談ください。

Author：

Yujiro

Profile：

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。