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が適用されているのか確認する方法も覚えていきましょう。

最後まで読んでいただきありがとうございました！