一つの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で書く場合はこういった事が起きやすいので注意が必要です。
飯田市でホームページ制作・広告運用をサポート｜デザインスタジオiR
牧内理恵
まきうちりえ
飯田市在住、広告制作歴20年以上。これまで200名以上のクライアント様と向き合い、100件以上のサイト制作を手掛けてきたデザイナー兼エンジニアの牧内理恵です。御社の強みを引き出し、業績アップに繋がるWebサイト・ネットショップ・販促ツールをご提案します。拠点とする長野県内はもちろん、全国各地からのご依頼にも柔軟に対応しております。
「相談してよかった」と言っていただける、飯田下伊那地域のパートナーとして。
長野県飯田市を拠点に、ホームページ制作やECサイト構築、Web運用のトラブル解決を承っています。20年以上のキャリアで培った「伝わるデザイン」と「確かな技術」で、御社の業績アップを支えます。飯田・下伊那エリアはもちろん、全国からのオンライン相談も大歓迎です。
「ホームページを作りたい」「ホームページをリニューアルしたい」といったご依頼もお気軽にお声がけください。
※強引な勧誘は一切ありませんので、安心してお悩みをお聞かせください。
