【CSS】コメントの書き方ミスに注意！CSSが反映されない時の解決方法

Last updated at 2025-03-31Posted at 2025-03-30

はじめに

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を直接書く機会が減っていたため、初歩的なミスをしてしまいました。