CSSが反映されない原因と対処法:3つのポイント

CSS反映されない原因ってなに?

CSSを編集したのにサイトのデザインが変わっていない!」なんてことはサイトを始めたばかりの初心者の方にはよくありがちなことです。

そんな時でも焦らずにCSSが反映されない原因を探ってみましょう。

今回はチェックしておくべきポイントを大きく分けて3つご紹介しますので是非参考にしてみてくださいね。

キャッシュを削除する

キャッシュ」とは、一度表示したデータを保存する機能のことを指します。

ブラウザがページをより速く表示させるためには欠かせない機能になりますが、前のデータが保存されたままだといくらページを更新してもCSSは反映されません。

ブラウザの履歴からキャッシュを削除してみましょう。

ぶろぐ先生
キャッシュが残ったまま問題はよくありがち!

ショートカット

  • Macの場合
    command + shift + delete
  • Windowsの場合
    Ctrl + Shift + Delete

のショートカットキーを使用すると履歴消去画面が表示されますので、キャッシュを選択して削除してください。(Chrome,Firefox,IE対応)

CSSが正しく編集できている場合は、もう一度ページを更新するとデザインがきちんと反映されるはずです。

 

CSSの記述ミスを探す

ちょっとした記述ミスでCSSが反映されていないかもしれません。
もう一度、記述したorコピペしたCSSを確認してみましょう。

ありがちな記述ミスをいくつかご紹介しておきます。

書き間違え「セレクタ名」「プロパティ名」「値」

ぶろぐ先生
セレクタ、プロパティ、値はCSSのこの部分!

誤字や脱字がないかをもう一度見直してみましょう。
また、全角スペースが混ざっている場合も反映されないので注意が必要です。

書き忘れ「セミコロン ; 」「閉じ括弧 } 」

複数のプロパティを指定する際に「;」が抜けているとCSSが正しく反映されません。

.example {
color: red
background: gray;
}

}」の閉じ忘れも同様です。

div {
margin-bottom: 10px;

p {
padding: 10px;
}

「;」「}」を書き忘れていないか、もう一度チェックをしましょう。

セレクタ指定の間違え

のセレクタの指定方法は間違いです。

HTML <div class=”example”> … </div>
CSS  #example {~}

classを指定する際は「#」ではなく「.」を使用します。(「#」はid指定)

コメントアウトのミス「/* 〜 */」

/*ここのテキストは反映されません*/
p {
font-size: 10px;
}

コメントアウト(/*〜*/)はメモとしてよく使用され、実際のデザインには反映されません。

*/」閉じ忘れに失敗している場合、広範囲のスタイルにコメントアウトが適用されCSSが反映されない原因になっている場合もあります。

 

CSSの優先度を上げる

特に記述ミスは見つからなかった!」って方はCSSの優先度が影響しているかもしれません。

複数のスタイルが重複している場合、優先度の高いスタイルが適用されます。
そのため、変更したいスタイルの優先度が他のスタイルよりも低いと反映されません。

  • CSSでは後ろに書かれたスタイルの優先度が高くなる。
  • セレクタ指定によっても優先順位が異なる。(id指定>class指定)

CSSの構造を見直し優先度を上げるか、優先させたくない方は削除するなどの対策を行いましょう。

!importantを付ける

優先度を上げる一番手っ取り早い方法は「!important」をスタイル指定の末尾に付ける方法です。

.example {
color: red !important;
}

「!important」を付けたスタイルは優先的に適用されますが、後々スタイル指定をする際にジャマになり適用されないなんてこともありますので使い過ぎは要注意です。

 

ぶろぐ先生

CSS反映された??

まとめ

CSSが反映されない原因と対処法をいくつかご紹介しました。

ブラウザによってもデザインの見え方が異なる場合もあるので、色々試してみることが大切です。初心者の方がCSSを編集する際はコピペしておくなどのバックアップ対策をしておきましょう。