ブラウザのズーム（拡大表示）でレイアウトが崩れるときの対処

そもそもブラウザのズームで何が拡大されるのか

ブラウザのズーム（Ctrl/Cmdと＋）は、ページ全体を拡大するページズームと、文字だけを大きくする文字サイズ変更の2種類があります。多くのブラウザの初期設定はページズームで、画像も文字もまとめて拡大されますが、設定や拡張機能で文字だけ拡大される環境もあります。

ページズームのときは、pxもremも同じ倍率で拡大されるため理屈の上では崩れにくいはずです。それでも崩れるのは、ある要素を固定px、別の要素をremや%で指定し、さらにメディアクエリの境界をpx固定にしているといった、単位の混在が引き金になっているケースが大半です。

まずは自分の崩れが「ページズームで起きるのか」「文字サイズ変更で起きるのか」を切り分けると、原因の範囲がぐっと狭まります。

固定pxとremを併用すると崩れる仕組み

ボタンの高さを固定pxで決め、中の文字をremで指定していると、文字サイズ変更（remやemの基準値が変わる操作）では文字だけが大きくなり、固定高のボタンから文字がはみ出します。逆に幅をremで取りつつ内側の余白をpxで固定すると、拡大時に内容が詰まって見えます。

横並びのカラムでも同様で、コンテナ幅をpxで固定し、子要素をremで広げると、合計幅がコンテナを超えて折り返しや横スクロールが発生します。崩れる箇所はたいてい「囲む側と囲まれる側で単位が違う」場所に集中します。

対策の基本は、拡大に追従させたい寸法（文字・余白・行間）をremやemに寄せ、追従させたくない物理的な値（境界線の太さなど）だけをpxに残すことです。レイアウトの折り返し境界はメディアクエリよりもmax-widthやflex-wrap、gridの自動折り返しに任せると、ズーム時も破綻しにくくなります。

症状別チェック表

ブラウザのズーム（拡大表示）でレイアウトが崩れるは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

崩れを再現して原因を絞り込む手順

崩れは特定のズーム率や特定の画面幅でだけ出ることが多いので、機械的に再現してから直すのが近道です。次の順で確認します。

1. ズームを100%に戻し、崩れていない基準の見た目を確認する
2. Ctrl/Cmdと＋で110%、125%、150%と段階的に上げ、最初に崩れる倍率を特定する
3. 崩れた要素を右クリックして検証（開発者ツール）で開き、幅・高さ・余白の単位がpxかremかを見る
4. 囲む要素と囲まれる要素で単位が混在していないかを確認する
5. 疑わしいpxをremに置き換えて、同じ倍率で崩れが消えるか試す

メディアクエリ境界とフォント基準の見直し

px固定のメディアクエリ境界（例: 768pxで切り替え）は、文字だけ拡大する環境では切り替わらず、見た目と中身がずれることがあります。emベースの境界にすると、ユーザーの文字拡大に合わせてレイアウトも切り替わり、読みやすさを保てます。

ルートのフォントサイズをpxで固定してしまうと、ユーザーがブラウザ設定で大きくした文字サイズを無視することになります。rootは%やブラウザ既定に任せ、各要素はremで相対指定すると、アクセシビリティと崩れにくさの両立がしやすくなります。

直したら相手の環境で見え方を確認する

自分のPCで直っても、相手のディスプレイ解像度・OSの表示倍率・既定フォントサイズが違えば見え方は変わります。最終確認は、できるだけ相手が見るのと同じ条件で行うのが安全です。

ギガサイト便にHTMLやZIPをドロップすると、その場で 〇〇.giga-site.com の共有URLが発行され、実機のブラウザで本番に近い見え方を確認できます。同じURLのまま中身を差し替えられるので、修正版を作るたびにリンクを送り直さずに、相手に最新の状態で再確認してもらえます。関係者だけに見せたいときはパスワードやメール認証を併用すると安心です。