CAKI-COMMUNE

読者です 読者をやめる 読者になる 読者になる

CAKI-COMMUNE

社内SEとフリーランスという働き方

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

メディアクエリ css 対処法

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

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

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

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

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

 

Sponsored Link

 

レスポンシブデザインとは

スマホ・タブレット対応

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

必要性

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

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

Media Queriesで実現する

フレームワークを使わない

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

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

cssにMedia Queriesを記載

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

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

Sponsored Link

 

Media Queriesが反映されない場合

1.記述場所の確認

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

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

2.viewportを記述する

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

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

 

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

Sponsored Link

 

にほんブログ村 ライフスタイルブログへ
にほんブログ村

応援される方、ランキングに参加しております。クリックにご協力を。