css media screen 効かない

CSSメディアクエリが効かない？その原因と解決策！

CSSメディアクエリを使ってレスポンシブなWebサイトを作っているのに、なぜか意図した通りにスタイルが適用されない...。そんな経験はありませんか？この記事では、CSSメディアクエリが効かない原因と、その解決策を分かりやすく解説します。

よくある原因分析

メディアクエリが効かない原因は様々ですが、まずは以下のポイントをチェックしてみましょう。

1. 文法エラー

CSSの文法は一見簡単そうに見えて、実は奥が深いです。メディアクエリの記述に誤りがあると、正しく解釈されず、期待通りの動作をしないことがあります。

よくあるミス 具体例 正しい書き方
コロン(:)の付け忘れ 
@media screen and (max-width 800px) { ... }
 
@media screen and (max-width: 800px) { ... }
セミコロン(;)の付け忘れ 
@media screen and (max-width: 800px) {
  body {
    font-size: 16px
  }
}
 
@media screen and (max-width: 800px) {
  body {
    font-size: 16px;
  }
}
括弧の閉じ忘れ 
@media screen and (max-width: 800px { ... }
 
@media screen and (max-width: 800px) { ... }

2. メディアタイプの指定ミス

メディアクエリでは、どの種類のデバイスを対象とするかを指定するために「メディアタイプ」を指定します。例えば、画面表示用のスタイルを定義したい場合は「screen」、印刷用のスタイルを定義したい場合は「print」を指定します。

間違ったメディアタイプを指定してしまうと、目的のデバイスでスタイルが適用されません。

メディアタイプ 説明
screen パソコン、スマートフォン、タブレットなどの画面表示用のデバイス
print プリンターなどの印刷用のデバイス
all 全てのデバイス

上記の例では、画面表示用のスタイルを定義したい場合は「screen」を指定する必要があります。もし「print」と指定してしまうと、印刷時にしかスタイルが適用されません。

3. 論理演算子の使い間違い

メディアクエリでは、「and」「or」「not」などの論理演算子を使って、複数の条件を組み合わせることができます。これらの演算子の使い方が間違っていると、意図した条件式にならず、スタイルが正しく適用されません。

論理演算子 説明 例
and 複数の条件を全て満たす場合に真 
@media screen and (max-width: 768px) and (orientation: portrait) { ... }
or 複数の条件のいずれかを満たす場合に真 
@media screen and (max-width: 768px), screen and (orientation: landscape) { ... }
not 条件を満たさない場合に真 
@media not print { ... }

4. ブラウザキャッシュ

ブラウザは、Webページの表示速度を向上させるために、CSSファイルなどのリソースをキャッシュすることがあります。そのため、CSSファイルを編集しても、ブラウザが古いキャッシュを使用していると、変更が反映されず、メディアクエリも正しく動作しないことがあります。

解決策としては、以下の方法があります。

  • ブラウザのキャッシュをクリアする
  • CSSファイルのURLにクエリパラメータを追加する (例: style.css?v=2)

5. CSSの優先順位

CSSでは、複数のスタイルが適用される場合、どのスタイルを優先するかを決定するルールがあります。メディアクエリで定義したスタイルよりも、他のスタイルの優先順位が高い場合、メディアクエリで定義したスタイルは無視されてしまいます。

解決策としては、以下の方法があります。

  • メディアクエリで定義したスタイルに「!important」を付ける
  • スタイルの記述順序を見直す

デバッグ方法

メディアクエリが効かない原因を特定するために、以下の方法を試してみましょう。

1. デベロッパーツールの活用

ChromeやFirefoxなどのブラウザには、Webページのデバッグに役立つ「デベロッパーツール」が搭載されています。デベロッパーツールを使うと、以下のようなことができます。

  • 画面サイズをエミュレートして、メディアクエリが正しく動作するかを確認する
  • 要素に適用されているスタイルを確認し、メディアクエリで定義したスタイルが反映されているかを確認する
  • CSSファイルのエラーを確認する

2. テスト用のスタイルを追加する

メディアクエリが効いているかどうかを分かりやすくするために、テスト用のスタイルを追加してみましょう。例えば、以下のように、メディアクエリが適用された場合に背景色が変わるようにCSSを記述します。 

@media screen and (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

このCSSを適用した状態で、画面サイズを768px以下に縮小したときに背景色が変われば、メディアクエリは正しく動作しています。

ベストプラクティス

メディアクエリに関する問題を未然に防ぐために、以下のポイントを心がけましょう。

1. コードを整理整頓する

CSSファイルが複雑になると、どこに何が書いてあるか分からなくなり、ミスが発生しやすくなります。インデントを正しく使い、コメントを積極的に活用するなどして、コードを整理整頓しましょう。

2. CSSプリプロセッサを活用する

SassやLessなどのCSSプリプロセッサを使うと、変数やネスト構造などを利用して、より効率的にCSSを記述することができます。メディアクエリも、プリプロセッサを使うことで、よりシンプルで見やすいコードで記述することができます。

3. モバイルファーストを心がける

近年では、スマートフォンやタブレットなどのモバイルデバイスでWebサイトを閲覧するユーザーが増えています。そのため、モバイルデバイスを基準としたWebサイト設計（モバイルファースト）が重要となっています。

メディアクエリを使う場合も、まずはモバイルデバイスで適切に表示されるようにスタイルを定義し、その後でPCなどの画面サイズが大きいデバイス用のスタイルを定義していくようにしましょう。

まとめ

この記事では、CSSメディアクエリが効かない原因と解決策、デバッグ方法、そしてベストプラクティスについて解説しました。この記事が、レスポンシブなWebサイト制作の一助となれば幸いです。

よくある質問

Q1. メディアクエリはどこに記述すればいいですか？

A1. メディアクエリは、HTMLファイル内のstyleタグ内、または外部CSSファイル内のどちらに記述しても構いません。ただし、外部CSSファイルに記述する方が、HTMLファイルとCSSファイルが分離され、コードが見やすくなるためおすすめです。

Q2. メディアクエリのbreakpointは何pxに設定すればいいですか？

A2. breakpointは、Webサイトのデザインやターゲットとするデバイスによって異なります。一般的には、スマートフォン、タブレット、PCなどの主要なデバイスの画面サイズを参考にbreakpointを設定します。

Q3. メディアクエリは古いブラウザでも動作しますか？

A3. メディアクエリは、Internet Explorer 9以降、Firefox 3.5以降、Chrome、Safari、Operaなどの主要なブラウザでサポートされています。ただし、古いブラウザではサポートされていない場合もあるため、注意が必要です。

その他の参考記事:CSSメディアタイプmedia