visibility_off現象
- モバイルやタブレットなど画面幅を切り替えても、
@media内のスタイルが適用されない - レスポンシブ用のレイアウト変更が反映されず、常にPC版のまま崩れた表示になる
help_outline原因
<meta name="viewport">が設定されていない、または誤記- ビューポートの指定がないと、スマートフォンはPCサイト全体を縮小して表示しようとするため、メディアクエリが意図通りに機能しません。
- メディアクエリの記述ミス
- 括弧の閉じ忘れ、比較演算子（
min-width/max-width）の間違い、コロンやカンマ位置の誤りなどが考えられます。 - CSSの読み込み順序が逆転している
- レスポンシブ用のスタイルが、基本のスタイルより先に読み込まれてしまい、後から上書きされている可能性があります。
- セレクタの優先度が低く上書きされる
- 同じ要素に対して、メディアクエリ外のより強力なセレクタ（例:
#id .classなど）が指定されていると、そちらが優先されます。
build対策・コード例
HTMLの<head>内にビューポート設定を追加
この一行がなければ、レスポンシブ対応は始まりません。必ず<head>内に記述します。
<meta name="viewport" content="width=device-width, initial-scale=1.0">メディアクエリの書き方を確認・修正
/* モバイルファースト（小→大）の例 */
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
/* PCファースト（大→小）の例 */
@media (max-width: 768px) {
.container {
padding: 0 1rem;
}
}※括弧やコロン、セミコロンの位置に誤りがないか要チェック
CSSの読み込み順を調整
<!-- 基本スタイル -->
<link rel="stylesheet" href="css/style.css">
<!-- レスポンシブ用のスタイルは必ず後で読み込む -->
<link rel="stylesheet" href="css/responsive.css">優先度を強める／詳細セレクタを使う
@media (max-width: 768px) {
body .header .logo {
font-size: 1.2rem; /* より具体的なセレクタで上書き */
}
}bug_reportデバッグ方法
- 開発者ツールの「Device Toolbar」を使う
Chrome DevTools の Toggle Device Toolbar（Ctrl+Shift+M）で画面幅を自由に切り替えながら、スタイルが適用されるか確認します。 - 実際にどのCSSルールが適用されているか確認
「Elements」パネルで要素を選択し、「Styles」パネルでどのメディアクエリが有効になっているか、どのスタイルが上書きされているかを確認できます。 - CSSファイルのソースマップをたどる
どのファイルのどの行でルールが定義されているかを特定し、読み込み順やファイル名の誤りをチェックします。
school応用ポイント：メディアクエリの管理
変数化して使いまわす
ブレイクポイント（幅の切り替え地点）をCSS変数にしておくと、後からまとめて変更できるので管理が楽になります。
:root {
--breakpoint-sm: 480px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
}
@media (max-width: var(--breakpoint-md)) { … }モジュールごとに分割
レイアウト／テキスト／コンポーネントごとにメディアクエリを`responsive.css`など別ファイルにまとめると、`style.css`の見通しが良くなります。
チェックポイント
✅ <meta name="viewport"> が正しく設定されている
✅ メディアクエリ内の括弧・比較演算子に誤りがない
✅ レスポンシブ用CSSが基本CSSの後に読み込まれている
✅ セレクタの優先度で上書きされていないか確認した
✅ 実機やデバイスモードで必ず表示テストを行った