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