レスポンシブでCSSが効かなくなる時の解決方法

一つのCSSを使用して、必要に応じてCSS内で@media screenを使いコンテンツの幅に合わせてCSSの振り分けを行っている場合。

SPサイズにしたりPCサイズにした際に、急に特定のCSSが効かなくなる事があります。

原因：CSS内の@media screenの閉じタグが抜けている

効かなくなる記述の前の方の行に書かれている記述で@media screenの記述が無いか探します。

以下が正しい形なのですが

@media screen and (max-width: 800px) {

    .aaa {

        background-color: #68B876;

    }

}

以下のように閉じタグの「　｝」がうっかり抜けている場合があります。

@media screen and (max-width: 800px) {

    .aaa {

        background-color: #68B876;

    }

上記のように閉じタグが抜けていると、800px以下の幅になった際に、この間違えた記述より下に書かれたCSSは効かなくなってしまいます。

まとめ

レスポンシブの記述方法はいくつかありますが、コンテンツの幅ごとにCSSを分けて作成する方法と、ひとつのCSSの中で@media screenを使って記述する方法とあります。

コーダーさんの好みや、リニューアルの場合はそれまでの経緯によって方法を選ぶことになりますが、ひとつのCSSで書く場合はこういった事が起きやすいので注意が必要です。