はじめに

HTMLとCSSでLPを制作している際に、なぜかbodyにCSSが反映されず、解決に時間がかかりました。本記事では、その解決方法を紹介します。

事象

bodyタグにCSSが反映されない現象が発生しました。しかし、headerタグには背景色が適用されていたため、CSS自体は正常に読み込まれていました。また、他にCSSの上書きが発生する要素もありませんでした。

// 共通CSS

html {
  background-color: blue;
}

header {
  background-color: red;
  color: #fff;
  padding: 10px 0;
}

解決策

コメントアウトの記述方法に誤りがありました。JavaScriptでは//でコメントアウトできますが、CSSでは/* */を使用します。

/* 共通CSS */

html {
  background-color: blue;
}

header {
  background-color: red;
  color: #fff;
  padding: 10px 0;
}

なお、今回の問題はbodyタグ特有のものではありません。

CSSの記述ミスが原因であり、他のタグでも同じように影響を受ける可能性があります。例えば、divやsectionなどのタグにも適用されないケースが発生します。

終わりに

最近はCSSを直接書く機会が減っていたため、初歩的なミスをしてしまいました。