2019/05/03 (更新日: 2019/10/24)

[レスポンシブデザイン]メディアクエリが効かないときの対処法[CSS]

こんにちは。kakeです。

先日レスポンシブデザインにしようとしてコーディングをしていたのですが、実際にサーバーにアップしてスマホで確かめてみると反映されていないということがありました。

ということで今回は備忘録としてメディアクエリが効かないときに考えるべきことを書いていきます。

Contents

メディアクエリの書き方

@media(max-width:750px){
　/* ここにスタイルを書いていく */
}

このように書いていけばオッケーです。

今回の例ではMAXの幅が750pxで、それより小さいときに適用されます。

※注意

CSSが上から読み込まれていくので順序には注意が必要です。

PC表示を元に作っていった場合はPC表示のスタイルより下にスマホなどのスタイルを書いていきましょう。

/*例（PC→スマホの順番）*/
@media(max-width:1000px){
　/* ここにスタイルを書いていく */
}

@media(max-width:750px){
　/* ここにスタイルを書いていく */
}

この場合はまず1000pxより小さいときのスタイルが適用されて(PC表示)、その後に750pxより小さい場合にはスタイルが上書きされるということですね。

ファイルを分けた場合はファイルの読み込みの順番に注意しましょう。

CSSファイルの読み込み忘れですね。

<link rel="stylesheet" href="stylesheet.css">

この経験はもちろんあります笑

これを防ぐために、雛形を作っておくことがいいかなと思います。

<meta name="viewport" content="width=device-width,initial-scale=1">

この記述を忘れてしまうと反映されません。

viewportについての説明については以下の記事がわかりやすいかと思います。

qiitaの記事です。

メディアクエリの書き方の注意で書いたように、読み込みは上から順にされます。

これもしっかりできていないと、デザインが崩れますので注意してください。

viewportの記述を忘れるというのが一番ありそうです。

落ち着いて確認しておきたいものですね。

それではまた。