症状の確認：どう崩れているかを見る
スマホでの崩れ方にはいくつかパターンがあります。全体が極端に縮小されて文字が小さい、横スクロールが発生して右側がはみ出す、要素が重なって読めない、などです。どのパターンかで原因の見当がつきます。
実機がない場合は、パソコンの開発者ツールにあるデバイス表示の切り替え機能を使うと、スマホ幅での見え方を確認できます。まずはこれで再現するか試しましょう。
よくある原因：viewport未指定と固定幅
もっとも多いのは、HTMLにviewportの指定がないケースです。これがないとスマホはパソコン向けの幅でページを表示しようとし、全体が縮小されて文字が読みにくくなります。
次に多いのが、ピクセル単位の固定幅を指定している要素や、大きな画像、長い文字列が画面幅を超えてしまうケースです。これらが横スクロールやはみ出しの原因になります。
- viewportのメタタグが指定されていない
- 固定幅の指定が画面幅を超えている
- 画像に最大幅の指定がなく大きいまま表示される
- 横並びの要素が折り返さず詰め込まれている
症状別チェック表
スマホだけ表示が崩れるときは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。
確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。
- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する
自分でできる確認：デバイス表示で再現する
開発者ツールのデバイス表示でスマホ幅に切り替え、崩れが再現するか確認します。再現したら、はみ出している要素を選択して、その幅や余白の指定を調べます。
横スクロールが出る場合は、画面幅を超えている要素を探すのが近道です。固定幅や大きな画像が原因であることが多いので、それらの幅指定を見直します。
ギガサイト便での対処手順
原因の多くはHTMLとCSSの作り方にあるため、修正したファイルをZIPにまとめて差し替えるのが基本の流れです。ギガサイト便なら同じURLのまま中身を入れ替えられるので、共有先に再送せずに直せます。
以下の手順で対応してください。
- HTMLのhead内にviewportのメタタグを追加する
- 固定幅の指定を画面幅に応じて伸縮する形に見直す
- 画像に最大幅100パーセントの指定を入れる
- 横並び要素が狭い画面で折り返すよう調整する
- 修正したファイルをまとめてZIPに圧縮する
- ギガサイト便で同じURLに差し替えて公開し、スマホで確認する
予防：作る段階でスマホ幅を確認する
再発を防ぐには、最初からviewportを指定し、幅は固定値ではなく画面に応じて伸縮する形で作るのが有効です。画像にも最大幅の指定を入れておけば、はみ出しを防げます。
公開前に開発者ツールのデバイス表示でスマホ幅を確認し、横スクロールが出ないことをチェックしてからZIP化すると、共有先での崩れをほぼ防げます。可能なら実機でも一度確認しておくと安心です。
よくある質問
スマホで全体が小さく表示されます。
HTMLにviewportのメタタグがない場合に起こりやすい症状です。head内にviewportの指定を追加すると、スマホでも適切な幅で表示されるようになります。
スマホで横スクロールが出てしまいます。
画面幅を超える固定幅の要素や大きな画像が原因のことが多いです。開発者ツールのデバイス表示ではみ出している要素を探し、幅指定を見直すか画像に最大幅を設定してください。
実機がなくてもスマホ表示を確認できますか。
パソコンの開発者ツールにあるデバイス表示の切り替え機能で、スマホ幅での見え方を確認できます。完全ではありませんが、崩れの再現と原因の特定には十分役立ちます。
修正したらURLは変わりますか。
ギガサイト便は同じURLのまま中身を差し替えられます。スマホ向けに直したファイルをZIPで再アップロードすれば、共有相手にURLを送り直す必要はありません。
原因が分からないときはどこから確認すべきですか？
まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。