副業

「CSSが変わらない」の改善策3選

WEB制作中にCSSを変更しても変更がかからなくて困ることはよくあると思います。
私もしょっちゅうあります。
そんな時まず何を確認すればいいか、私の経験上原因となることが多い3つを厳選して改善方法をお伝えしようと思います。

この記事でわかること

  • 「CSSが変わらない」可能性の高い原因
  • CSS変更するための改善策

 

原因・改善策3選

①CSSの記述間違え

①と②は原因として相当多いです。
ブログ運営者の方で私に依頼までしてくださった結果原因がこれという場合もあるくらいです。
あるあるのパターンがいくつかあるので紹介します。

・「margin」を「magin」→スペルミス、誤字脱字
・「margin」→一部文字が全角(空白が全角なこともしばしば)
・「:」と「;」のミス
・「}」の記載漏れ

このような部分の確認が必要です。
改善策としてはめんどくさがらず1回書き直してみるのをおすすめします。

②記述したCSSの優先順位が低い

CSSには優先順位があります。後ろに書いたものが優先されたり、直接記述した方が優先されたりします。
CSSを直接記述しても変更がされない場合に、他のシートで!importantの記述がある場合があります。
例えばhtmlファイルに直接margin: 2%;と表記しても、他のCSSファイルでmargin: 0 important;と記載があるとmargin: 2%;は反映されません。
この場合はhtmlファイルにmargin: 2% !important;と記載するか、他のCSSファイルにあるmargin: 0 !important;の!important;を削除することで改善できます。

③変更前のキャッシュが残っている

特に画像の変更時に考えられる原因がキャッシュ残りです。
色々やってみてダメだったら試してみると良いと思います。
googlechromeは履歴の削除からキャッシュのクリアも可能です。

最後に

何も記述が間違っていないのにCSSが変更されないということはあり得ません。
間違えているのはいつも人間です。
必ず原因はあるものです。
原因がわからないときは面倒ですがもう一度最初からやってみるというのが意外と一番近道だったりもします。

 

 

 

-副業

© 2021 ゆとりーマンの日常 Powered by AFFINGER5