CSSを書いたのに｢なぜか反映されない……｣という経験はありませんか？
CSSが反映されない原因は、スペルミスやファイルの読み込みミスなど、ちょっとしたことであることが多いです。
今回は、初心者が特に間違えやすい ｢CSSが反映されない原因｣ を10個紹介します。
目次
- 1. CSSファイルの読み込み先が間違っている
- 2. linkタグを書き忘れている
- 3. CSSのセレクタが間違っている
- 4. .や#を付け忘れている
- 5. CSSのプロパティ名が間違っている
- 6. ;や}を書き忘れている
- 7. HTMLのタグとCSSの指定が合っていない
- 8. 別のCSSに上書きされている
- 9. ブラウザのキャッシュが残っている
- 10. CSSがコメントアウトされている
- CSSが反映されないときのチェックリスト
- まとめ
1. CSSファイルの読み込み先が間違っている
HTMLからCSSファイルを読み込むときは、hrefの指定が正しいか確認しましょう。
<link rel="stylesheet" href="style.css">
例えばCSSファイルがCSSフォルダの中にある場合は、
<link rel="stylesheet" href="css/style.css">
のように指定します。
CSSファイルの場所とhrefの指定が一致しているか確認しましょう。
2. linkタグを書き忘れている
CSSファイルを作っただけでは、HTMLにCSSは反映されません。
<head>タグの中でCSSファイルを読み込む必要があります。
<head>
<link rel="stylesheet" href="style.css">
</head>
linkタグを書き忘れていないか確認しましょう。
3．CSSのセレクタが間違っている
HTMLのclass名とCSSのセレクタが一致しているか確認しましょう。
<p class="text">こんにちは</p>
.text {
color: red;
}
例えば、HTMLがclass="text"なのにCSSで
.texts {
color: red;
}
と書いてしまうとCSSは反映されません。
クラス名やID名のスペルミスにも注意しましょう
4．.や＃を付け忘れている
classとidでは、CSSの書き方が異なります。
classの場合
<p class="text">こんにちは</p>
.text {
color: red;
}
idの場合
<p id="text">こんにちは</p>
#text {
color: red;
}
-
class→.を付ける -
id→#を付ける
というルールを覚えておきましょう。
5．CSSのプロパティ名が間違っている
CSSのプロパティ名を間違えると、指定したスタイルが反映されません。
例えば、
.text {
colour: red;
}
colourというプロパティはありません。
正しくはcolorです。
.text {
color: red;
}
プロパティ名のスペルミスがないか確認しましょう。
6. ;や}を書き忘れている
CSSでは、プロパティの最後に;を付けます。
.text {
color: red
font-size: 20px;
}
この場合、color: redの後に;がありません。
正しくは、
.text {
color: red;
font-size: 20px;
}
また、{と}の対応が合っているかも確認しましょう。
7. HTMLのタグとCSSの指定が合っていない
CSSでは、指定したHTML要素に対してスタイルが適用されます。
h1 {
color: red;
}
HTML側が、
<h2>タイトル</h2>
となっている場合、h1に対するcssは適用されません。
<h1>タイトル</h1>
のように、HTMLとCSSで指定している要素が合っているか確認しましょう。
8. 別のCSSに上書きされている
CSSは複数の指定がある場合、別のCSSによって上書きされることがあります。
.text {
color: red;
}
.text {
color: blue;
}
この場合、後に書かれたblueが適用されます。
また、セレクタの優先順位によって、別のCSSが優先される場合もあります。
「CSSを書いたのに反映されない」ときは、他のCSSに上書きされていないか確認しましょう。
9. ブラウザのキャッシュが残っている
CSSを修正したのに変更が反映されない場合、ブラウザに古いCSSが残っている可能性があります。
その場合は、
- ページを再読み込みする
-
Ctrl + F5で強制再読み込みする - ブラウザのキャッシュを確認する
などを試してみましょう。
10. CSSがコメントアウトされている
CSSでは、/*と*/で囲まれた部分はコメントとして扱われます。
/*
.text {
color: red;
}
*/
この状態では.textのCSSは適用されません。
コメントを外すと、
.text {
color: red;
}
CSSが適用されるようになります。
CSSが反映されないときのチェックリスト
CSSが反映されないときは、次の項目を順番に確認してみましょう。
- CSSファイルの場所は正しいか
-
linkタグを書いているか -
hrefの指定は正しいか - セレクタのスペルは正しいか
-
.や#を付け忘れていないか - プロパティ名のスペルは正しいか
-
;や}を書き忘れていないか - 他のCSSに上書きされていないか
- ブラウザのキャッシュが残っていないか
- CSSがコメントアウトされていないか
まとめ
CSSが反映されない原因は、ファイルの読み込みミス・スペルミス・記号の書き忘れ・CSSの上書きなど、ちょっとしたミスであることが多いです。
CSSが反映されないときは、
「どこが間違っているんだろう？」
と考えるよりも、1つずつチェックして原因を探すことが大切です。
慣れてきたら、ブラウザの**開発者ツール（DevTools）**を使って、どのCSSが適用されているのか確認する方法も覚えていきましょう。
最後まで読んでいただきありがとうございました！