CSSの変更が反映されないときの主な原因

CSSを編集したのに、変更した部分が反映されなくて困った経験がある人は多いと思います。

反映されない原因は、いくつかあるので当てはまっているのものが無いか一度確認してみてください。よくあるCSSの変更が反映されない原因を紹介していきます。

CSSの変更が反映されないときの主な原因

記述が間違っている

一番よくある間違いとして、記述自体を書き間違えてる場合があります。単語のスペルが違っていたり、:と;を逆にしてしまっていたり、;を付け忘れたりしている間違いは、確認した場合でも見落としがちです。

Dreamweaverなどの専用のソフトを使っている場合は、このような間違いは発見して指摘してくれるので、原因ではないと思いますが、そうでない場合は、まずは記述の間違いがないかを確認してみましょう。

優先度の影響

記述が増えてくると、同じ要素に対して複数の指定を行ってしまうことで競合してしまう場面が出てきます。

CSSには、優先度というものが存在しており、記述の内容や順序によっては優先度の影響で変更しても記述が反映されない場合があります。

例えば、記述の箇所の優先度は、HTMLタグ→<head>内→外部スタイルシートとなっていて、同じ箇所へ別々の指定を行った場合はHTMLタグに記述したものが優先して反映されるため、<head>内や外部スタイルシートでいくらCSSを編集しても変更は反映されません。

ブラウザの問題

閲覧するブラウザで対応していないなど、CSSの記述には問題ないのにブラウザが原因でCSSが反映されない場合もあります。

まとめ

CSSの変更が反映されない場合の主な原因を紹介しました。間違いを発見しやすくする為にも、後から確認しやすい記述をするよう心がけましょう。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて