初心者必見　CSSを変更したのに反映されない場合の対処法！

CSS HTML

本日はCSSを変更したのに反映されない場合の対処方法についてご紹介していきます。

１、CSSの記述が間違っていないか？

当てたいHTMLのクラス名やタグ、IDと、CSSの記述が間違っていないかをチェックしましょう。

例えば

//HTMLファイル

<div class="box"></div>

//CSSファイル

#box{
height: 100px;
width: 100px;
}

上記の場合はclass名がboxである要素に対してCSSを当てる場合には　.box　としてあげるのが適切です。
反対に

//HTMLファイル

<div id="box"></div>

//CSSファイル

.box{
height: 100px;
width: 100px;
}

boxというIDを持つ要素に対して.(ドット)＋ID名としてしまうのも誤りです。
IDを指定してCSSを当てる場合には#＋IDとし、Class名を指定してCSSを当てる場合には.＋Class名としましょう！


２、優先度が低くなっていないか？
実際にアプリケーションを開発していくと、CSSファイルやHTMLファイルの記述が膨大になってしまいます。そこで起こりうるのが、一度使ってしまったClass名の要素と、同じClass名の要素を作成してしまい、一つ目の要素に対して働いてしまっているCSSが新しく追加した要素に対して働いてしまうということが起こってしまいます。
そうすると、CSSが思い通りの挙動にならない場合がでできてしまいます。
例えば

//HTMLファイル

<div class="box"></div>


//省略

<div class="box"></div>



//CSSファイル

.box{
height: 100px;
width: 100px;
}

//省略

.box{
height: 200px
width: 200px;
}

上記のような場合.boxというクラス名の要素が二つ存在しているので、CSSファイルの下側に記述している方が優先されてしまうので、クラス名boxの一つ目と二つ目のheightは２００pxになり、widthも２００pxになってしまいます。
上記の問題を解決するためにはClass名を変更してあげるか、!importantを使用しましょう！
適用したいスタイル指定の末尾に!importantをつけてあげると強制的にそのスタイルが適用されるようになります。

使用例

//CSSファイル

.box{
height: 100px;
width: 100px !important;
}


３、キャッシュが残っていないか？
上記の１、２の対処を行ったのにCSSが当たらないという場合にはキャッシュが残っているという可能性があります。
「キャッシュ」とは「1度開いたウェブページのデータをブラウザに保存しておいて、次に同じページを開くときに表示してくれる仕組み」のことです。

このキャッシュを消すためには「shift」キーを押しながら更新ボタンをクリックもしくはcommand + shift + rを押しましょう！
そうすることでキャッシュを削除することができます。


最後に
本日はCSSを変更したのに反映されない場合の対処法をご紹介していきました。
いかがだったでしょうか？
個人的には３つめのキャッシュが残っていないためにCSSが当たっていないという状況が一番多いような気がします。
最後までご覧いただきありがとうございました！