📚 ナレッジベース

CSS_レスポンシブが効かない時の2大落とし穴

最終更新 2026年07月27日 ／ 21_ナレッジベース/プロダクト開発/CSS_レスポンシブが効かない時の2大落とし穴.md

CSS：レスポンシブが効かない時の2大落とし穴

2026-07-27 mikke! のSP崩れ2件を根治した時の知見。どちらも「SP用のCSSは書いてあるのに効かない」という同じ顔で現れる。
全システム（TERASU公式HP／Lab／CRM／クライアントHP）で再発しうるので横展開すること。

落とし穴①：メディアクエリは詳細度を上げない

/* ❌ 効かない書き方 */
@media (max-width: 560px) {
  .d-label { flex: none; }        /* 詳細度 0,1,0 */
}
.d-label { flex: 0 0 130px; }     /* 詳細度 0,1,0・後に書かれている＝こっちが勝つ */

メディアクエリで囲んでも詳細度は上がらない。 同じ詳細度なら「後に書かれた方」が勝つ。
→ SP用の打ち消しルールは、打ち消したい通常ルールより必ず後ろに置く。

この時どう壊れるか（mikke!の実例）

flex: 0 0 130px は flex-basis が主軸方向に効く。
- PC（flex-direction: row）＝ 幅130px ← 意図通り
- SP（flex-direction: column）＝ 高さ130px ← ラベルが巨大な空白になる

実測：1行184px × 6行 = 1108px の余白地獄 → 修正後 457px。

見分け方

DevTools の computed で「書いたはずの値になっていない」なら確定。コードを読むだけでは絶対に気づけないので必ず実測する。

// ブラウザで一発診断
getComputedStyle(document.querySelector('.対象')).flex

落とし穴②：PC用の固定値をメディアクエリで囲み忘れる

/* ❌ 全画面幅に適用されてしまう */
.cta .box { --u: calc(100vw / 222) !important; padding: 40px 44px !important; }
.cta .ttl { font-size: 44px !important; }

「PCで見た目を合わせるために足した固定px」は、囲み忘れるとSPを破壊する。特に !important 付きは元のSPルールを踏み潰すので致命的。

この時どう壊れるか（mikke!の実例）

  • SPで --u が 1.76px まで縮む → 箱の幅 33.6u ≒ 59px
  • そこに固定 padding: 40px 44px（左右88px）が乗る → 箱が幅88pxに潰れる
  • 中の44pxの見出しが1文字ずつ縦に折り返す → 高さ568pxの縦棒に

実測：88×568px → 328×200px。

→ PC専用の寸法調整は必ず @media (min-width: 768px) に閉じ込める。 SPは元設計のSPルールに委譲する。

再発防止のチェック手順（レスポンシブ修正のたび）

  1. 数値で測る（目視だけで終わらせない）
    js // 崩れている要素の実寸・computed を出す const el = document.querySelector('.対象'); ({ w: el.getBoundingClientRect().width, h: el.getBoundingClientRect().height, ...getComputedStyle(el) })
  2. PC幅で回帰確認（SPを直してPCを壊す事故が多い）
  3. 横はみ出しチェック：document.documentElement.scrollWidth > innerWidth が false であること
  4. 直した箇所に「ここより下に同じセレクタの通常ルールを足すな」とコメントを残す

付随して分かったこと：複数セッション同時作業の事故

同じ大串FBを2つのClaude Codeセッションが受け、同じ箇所を同時に直して衝突。
片方のcommitに <<<<<<< Updated upstream のコンフリクトマーカーがそのまま入っていた（CSSが壊れる状態）。

  • deploy_mikke.sh の遅れ検査が本番事故を止めた（ローカルが古いまま出すと相手の成果が消える）
  • 1システム=1セッション原則を守る（feedback_one_session_per_system）
  • デプロイ前の git fetch + 遅れ検査は絶対に外さない

関連