簡単解決レスポンシブ対応メディアクエリが効かない時の対処法

メディアクエリ css 対処法

こんにちは。2足の笑ジストかじっくす(@tomo345)です。

もう少しで処女作のWebサイトが完成します。
そんな私が少しはまった事象。

メディアクエリが効かずスマホでデザインが変わらない。

そんな方はけっこういらっしゃるのではないでしょうか？
けっこうあるあるのようなので記載しておきます。
解決策はめちゃくちゃ簡単です。

すぐに解決策を知りたい方は、目次から3まで飛んでください。

PC、スマホ、タブレットなど複数の画面サイズで表示される場合に柔軟にレイアウトやデザインが調整されるWebデザインのことを言います。

現在、約70%のユーザがスマホでWebサイトを見ていると言われております。
スマホ対応していないWebサイトも見ることは可能ですが、どうしてもユーザビリティが低下してしまいます。

この時代、スマホ対応、レスポンシブデザインは必須項目と言えるでしょう。

Bootstrapを代表とするフレームワークで簡単に実現できます。
しかし、私のように駆け出しの方は一からcssで作ってみてください。

その方が勉強になります。
また、意外とレスポンシブデザインって簡単に実装できることを実感してください。

cssに以下を記載し、その内容にスマホやタブレットで見える際のデザインを記載していきます。

@media screen and (max-width: 769px) {
  /* スマホ用のスタイル */
}

実はcssの読み込みにも順番があります。
Media Queriesの構文が上部に書かれていると、せっかくのデザインが上書きされている可能性があります。

構文はcssの最後に記載する。
もしくは別ファイルにして、ヘッダの最終行に記載しましょう。

私の場合、これにはまっていました。
この魔法の一文をhtmlのヘッダに記載しましょう。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

基本的には上記のどちらかが原因だと思います。
ぜひ、試してみてください。

CAKI-COMMUNE