ホームページが特定のブラウザだけ崩れる｜原因6つと確認順

自社のホームページが、Chrome では正しく見えるのに Safari だけ崩れる、あるいはスマホの1台だけレイアウトがずれる——制作の現場で最も多い相談のひとつです。結論から書くと、原因は「見ている側の端末の状態」と「サイト側の CSS」の2系統に分かれ、先に見る側を3分で切り分けると、半分以上はサイトを直さずに解決します。

この記事では、Google と Apple の公式ヘルプ、MDN（ブラウザの技術仕様の定番資料）をもとに、確認の順番と直し方を整理しました。

結論：まず「見る側」の3つ、次に「サイト側」の3つを確認する

1〜3で直れば、サイトは壊れていません。4〜6に当たったときだけ、サイト側の修正が要ります。お客様から「崩れている」と連絡が来たときも、まず1〜3を一緒に確かめてもらうと、無駄な修正依頼を減らせます。

見る側の原因と確認方法（閲覧者ができること）

1. シークレットウィンドウで開き直す

Chrome のシークレット ウィンドウは、Windows なら Ctrl＋Shift＋N、Mac なら ⌘＋Shift＋N で開けます（Chrome ヘルプ）。デバイスに保存される情報が制限された状態で開くので、シークレットで正しく見えるなら、原因は普段のブラウザに残った情報か、入れている拡張機能に絞れます。広告ブロックなどの拡張機能を一時的にオフにして再読み込みし、直るかを見てください。

2. キャッシュを消す

ブラウザは次回の表示を速くするために、ページの一部（画像やファイル）を記憶しています（Chrome ヘルプ「閲覧データを削除する」）。サイトの CSS を更新したのに、古い CSS が残っているとレイアウトが崩れて見えます。Chrome では「閲覧履歴データの削除」から「キャッシュされた画像とファイル」だけを選べば、ログイン状態（Cookie）を消さずに済みます。

iPhone の Safari は「設定」→「アプリ」→「Safari」→「履歴とWebサイトデータを消去」です（Apple サポート）。こちらは履歴とキャッシュがまとめて消える点に注意してください。

3. ズーム・文字サイズの設定を戻す

Chrome では、サイトごとにページのズームを変えられます（Chrome ヘルプ）。以前に一度だけ拡大した設定がそのサイトに残っていると、そのブラウザでだけ文字がはみ出したり、横並びが縦に落ちたりします。右上のメニューの「ズーム」を100%に戻して確認してください。

サイト側の原因：新しい CSS とブラウザの対応差

4. そのブラウザが未対応の CSS を使っている

新しい CSS の機能は、ブラウザごとに対応した時期が違います。MDN は「Baseline」という目安で、主要ブラウザ（Safari の iOS 版と macOS 版、Chrome の Android 版とデスクトップ版、Edge、Firefox の Android 版とデスクトップ版）すべてで使えるかを示しています（MDN「Baseline」）。

• Widely available（広く利用可能）：すべての主要ブラウザで2.5年以上使える。
• Newly available（新しく利用可能）：すべての主要ブラウザの最新版で使えるが、古い版や古い端末では動かないことがある。
• Limited availability（限定的）：まだ一部のブラウザでしか使えない。

具体例を2つ挙げます（MDN のブラウザ互換性データより）。

たとえば :has() を使ったデザインは、古い Firefox や Safari 15.3 以前では効かず、そこだけ崩れます。MDN も、Baseline は「古い端末やブラウザの古い版」「OS に組み込まれた Web ビュー」で動くかまでは保証しない、と明記しています。

直し方の基本は、@supports（機能クエリ）で「対応しているときだけ新しい書き方を使い、対応していなければ従来の書き方で表示する」ことです（MDN「@supports」）。未対応のブラウザでも、最低限読める見た目に落ちるように作っておきます。

5. ベンダープレフィックス付きの古い書き方に頼っている

-webkit-（Chrome・Safari ほか）、-moz-（Firefox）といった接頭辞を「ベンダープレフィックス」と呼びます。MDN によると、これはブラウザが実験的な機能を試すために付けていたもので、いまのブラウザは実験的な機能をプレフィックスではなく設定のフラグの裏に置くようになりました（MDN「ベンダープレフィックス」）。

古いテンプレートや年数の経ったサイトでは、-webkit- 付きの指定だけが書かれていて標準の書き方が無い、というケースがあります。その場合、特定のブラウザでだけ効く・効かないが起きます。プレフィックス付きの行の下に、必ず標準の書き方も並べるのが直し方です。

6. 端末の OS が古く、ブラウザも古い版のまま

「スマホの1台だけ崩れる」ときに多いのがこれです。上の表のとおり、新しい CSS の多くは対応バージョンが決まっているので、OS の更新が止まった古い端末では効きません。閲覧者側で OS を更新できればそれで解決しますが、お客様の端末を選べない業種（高齢の方が多い、社用の古い端末が残っている など）では、サイト側で古い版でも崩れない書き方に寄せる判断が必要です。

制作の現場で多い「崩れ方」と、私たちのやり方

実務でいちばん多いのは、「確認した人の手元では直っているのに、お客様の端末では崩れたまま」という食い違いです。原因はほぼ2と6——確認した側のキャッシュが新しく、お客様の端末が古い——で、修正の中身ではなく確認の仕方が原因でした。

そこで私たちは、公開前と修正後に「キャッシュの無い状態」「iPhone の Safari」「Windows の Chrome／Edge」の3つを必ず見るようにしています。また、新しい CSS を使う箇所は @supports で逃げ道を作り、未対応の環境では従来のレイアウトで表示されるようにしています。崩れが「どのブラウザの・どの版で」起きているかを最初に特定すると、修正は小さく済みます。

私たちは、こうした表示の崩れの調査から、ホームページの制作・修正までお手伝いしています。記事の途中で恐縮ですが、「特定の端末だけおかしい」が続いて困っている方は、よろしければあわせてご覧いただけたら嬉しいです。

関連する表示トラブル

• 更新したのに古い内容が出る：ホームページを更新しても古い内容が表示されるときの直し方
• ファビコンだけ出ない：ホームページのファビコンが表示されない原因
• 「リダイレクトが繰り返し行われました」と出る：リダイレクトのループの直し方

まとめ

• 特定のブラウザだけ崩れるときは、シークレット→キャッシュ削除→ズームの順で、まず見る側を切り分ける。
• それで直らなければサイト側。未対応の新しい CSSとプレフィックス頼みの古い書き方を疑う。
• 新しい CSS は @supports で逃げ道を作り、古い端末でも読める見た目に落とす。