問題1: メディアクエリが効かない

問題

メディアクエリを設定したのに、画面幅を変えてもスタイルが切り替わりません。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <!-- viewportの設定なし -->
  <title>レスポンシブページ</title>
</head>
<body>
  <div class="container">
    <h1>レスポンシブテスト</h1>
    <p>画面サイズに応じて色が変わるはずです</p>
  </div>
</body>
</html>

CSS

.container {
  background-color: #4CAF50;
  padding: 20px;
  color: white;
}

/* モバイル用スタイル */
@media screen and (max-width: 768px) {
  .container {
    background-color: #2196F3;  /* 青に変わるはず */
  }
}

/* デスクトップ用スタイル */
@media screen and (min-width: 1024px) {
  .container {
    background-color: #FF9800;  /* オレンジに変わるはず */
  }
}

実行結果

※ 実際のブラウザでは画面幅を変えても色が変わりません

レスポンシブテスト

画面サイズに応じて色が変わるはずです

🔧 実際に試してみよう（リアルタイム更新）

上部でHTMLまたはCSSタブを選択して編集すると、下部の結果エリアがリアルタイムで更新されます。

📺 ライブプレビュー
更新中

ヒント

クリックしてヒントを表示

メディアクエリが動作するためには、ブラウザがデバイスの画面幅を正しく認識する必要があります。

HTMLの<head>タグ内に重要な設定が抜けていないか確認しましょう。

特にモバイルデバイスでの表示に関わる設定です。

解答

クリックして解答を表示

問題の原因

<meta name="viewport">タグが設定されていないため、モバイルブラウザがデスクトップ版のビューポートを使用し、メディアクエリが正しく動作しません。

viewportとは

  • ブラウザがWebページを表示する際の仮想的な表示領域
  • モバイルデバイスでは、デフォルトで980px程度の幅で表示
  • viewport設定により、実際のデバイス幅に合わせて表示

修正方法

viewportメタタグを追加

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>レスポンシブページ</title>
</head>
<body>
  <div class="container">
    <h1>レスポンシブテスト</h1>
    <p>画面サイズに応じて色が変わるはずです</p>
  </div>
</body>
</html>

viewportの各設定値

属性 説明 推奨値
width ビューポートの幅 device-width
initial-scale 初期ズーム倍率 1.0
maximum-scale 最大ズーム倍率 5.0（または指定なし）
minimum-scale 最小ズーム倍率 1.0（または指定なし）
user-scalable ズーム可否 yes（アクセシビリティ重要）

よく使うviewport設定パターン

/* 基本設定（推奨） */
<meta name="viewport" content="width=device-width, initial-scale=1.0">

/* ズーム禁止（非推奨：アクセシビリティ問題） */
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

/* 最大・最小ズーム設定 */
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">

/* 固定幅（レスポンシブでない場合） */
<meta name="viewport" content="width=1024">

メディアクエリのベストプラクティス

/* モバイルファースト */
.container {
  /* モバイルのデフォルトスタイル */
  background-color: #2196F3;
}

/* タブレット以上 */
@media screen and (min-width: 768px) {
  .container {
    background-color: #4CAF50;
  }
}

/* デスクトップ以上 */
@media screen and (min-width: 1024px) {
  .container {
    background-color: #FF9800;
  }
}

/* 一般的なブレイクポイント */
/* スマホ: 320px - 767px */
/* タブレット: 768px - 1023px */
/* デスクトップ: 1024px - 1439px */
/* 大画面: 1440px以上 */

覚えておくポイント

  • レスポンシブデザインにはviewportメタタグが必須
  • width=device-widthで実際のデバイス幅を使用
  • ユーザビリティのため、ズームは禁止しない
  • モバイルファーストで設計すると効率的
  • メディアクエリは複数組み合わせて使用可能