佐藤さん、パソコンではきれいなのに、スマホで見ると表の右側が切れています。自分のスマホ一台で直ったら、もう公開して大丈夫ですか？
一台で直ったのは良い一歩だね。でも画面幅が少し違うだけで、別の場所がはみ出すことがある。まず「ページ全体」と「はみ出した部品」を分けて確認しよう。
ページ全体のスクリーンショットをCodexに見せれば、全部分かりますか？
見た目の発見には役立つよ。ただ、横幅の数値、画像の読込み、メニューやリンクの操作は画面だけでは断定できない。見て、測って、触るところまでを一組にしよう。
WordPressの表示確認は、PCとスマホのスクリーンショットを眺めるだけでは終わりません。 画面幅を決めてページ全体を見た後、横スクロール、画像、表、コード、会話、メニューを個別に測り、読者と同じ操作を試します。
ここではCodexへ頼む依頼文と、結果の読み方を一つの公開ページを例に進めます。変更できる範囲がまだ曖昧なら、先に 変更範囲・禁止事項の伝え方 を確認してください。
まず三つの画面幅で同じURLを見る
最初の確認幅は、特定機種の名前ではなくブラウザ上の表示幅（CSSピクセル）で指定します。スマートフォン390px、タブレット768px、PC1280pxを入口にすると、狭い・中間・広い表示を比べられます。
| 確認幅 | 見る場面 | 最初に確認する場所 |
|---|---|---|
| 390px | 一般的なスマホの縦向き | 横はみ出し、メニュー、表、長い文字 |
| 768px | タブレットや境界付近 | 段組みの切替、画像と文章の並び |
| 1280px | PC | 本文幅、サイドバー、余白、行の長さ |
この三つだけで全端末を保証するわけではありません。崩れが始まる幅が見つかったら、その前後も確認します。例えば768pxで二列、767pxで一列へ変わるなら、両方を見る必要があります。
ページ全体の横スクロールを最初に調べる
ページ全体を左右に動かせる場合や、測定した横幅が表示領域を超えている場合は、どこかの要素がはみ出しています。スマホではスクロールバー自体が見えないこともあります。表だけを横へ動かせる設計は正常ですが、ページ全体が左右へ動くのは読みにくさにつながります。
公開URLを390px、768px、1280pxで表示してください。
各幅でページ全体の横スクロールが発生していないか測ってください。
発生している場合は、最も右へはみ出している要素を特定し、タグ名、class、はみ出したpx数、原因候補を報告してください。
まだファイルは変更せず、修正候補と影響範囲を示してください。
「スマホで崩れています」だけでは、原因が表、画像、コード、長いURLのどれか分かりません。Codexには、ページの幅と要素の幅の差を報告してもらいます。
表の中だけ左右に動くのと、ページ全体が左右にずれるのは別なんですね。横へ動いたら全部不具合だと思っていました。
列が多い表は、表の枠内だけを横スクロールできる方が読みやすい場合があるよ。その時も見出しや本文まで一緒に動かないことを確認しよう。
右にはみ出している場所がページの途中だと、自分では見つけにくいです。
ブラウザで各要素の右端を比べれば候補を絞れるよ。その後、実際の画面でその場所を見て、数値と見た目が一致するか確かめよう。
崩れやすい部品を順番に見る
| 部品 | よくある崩れ | 確認すること |
|---|---|---|
| 画像 | 横にはみ出す、縦横比が変わる | 読込成功、最大幅、alt、切れ方 |
| 表 | 右列が切れる、文字が一字ずつ折れる | 枠内スクロール、見出し、全列 |
| コード・依頼文 | 過大な字下げ、長い行 | 左内余白、改行、枠内スクロール |
| 会話 | 顔画像と吹き出しが重なる | 名前、画像、吹き出し幅、順序 |
| メニュー | 開かない、画面外へ出る | 開閉、リンク、閉じる操作 |
| ボタン | 文字切れ、押しにくい | 全文、周囲の余白、遷移先 |
| 長いURL | 折り返せずページを押し広げる | 改行または枠内スクロール |
コード例のインデント崩れは文字の位置を測る
HTMLの
pre
内に、ソースを見やすくするための空白を大量に入れると、その空白も画面へ表示されます。スマホでは本文が右へ押され、肝心の先頭文字が見えないことがあります。
記事内のすべてのコード例・依頼文枠を確認してください。
各枠について、枠の左端から最初の文字までの距離を測ってください。
HTML整形用の空白が本文として表示されていないか確認してください。
390pxで先頭文字と末尾文字が読め、ページ全体に横スクロールがないことを合格条件にしてください。
このサイトでは、コード例を
code-box
内の
code
に入れ、行は
br
で分け、左内余白16pxを基準にしています。大切なのは特定の数値を真似することではなく、サイト内の既存ルールと揃えた上で実測することです。
長い表が入らないので、文字をすごく小さくすれば収まりそうです。これで直したことになりますか？
収まっても読めなければ解決ではないよ。表の枠内だけ動かす、カード表示へ切り替える、不要な列を分ける方法を比べよう。
はみ出した部分をCSSで隠せば、横スクロールは消えますよね？
情報まで切り落とす可能性がある。スクロールが消えたことだけでなく、全列・全文・ボタンが読めることも合格条件にしよう。
よくある応急処置が失敗する理由
| 応急処置 | 見かけ上の変化 | 残る問題 |
|---|---|---|
| overflowを全体で隠す | 横バーが消える | 本文やボタンが切れたままになる |
| 文字を極端に小さくする | 一画面に収まる | 読めず、押しにくい |
| 画像へ固定幅を付ける | PCでは揃う | 狭い画面ではみ出す |
| 改行を大量に入れる | その文章だけ収まる | 別の幅で不自然に切れる |
| 一機種だけで確認 | その端末では直る | 境界幅の崩れを見逃す |
画像は「表示された」だけで合格にしない
画像は読込み成功、縦横比、トリミング、文字との重なり、代替テキストを確認します。遅延読込みの画像は、ページ下部までスクロールして初めて読込まれる場合があります。
ページの先頭から末尾までスクロールしてください。
すべての画像について、読込み失敗が0件か、縦横比が崩れていないか、本文やボタンへ重なっていないか確認してください。
内容を伝える画像には適切なaltがあり、装飾画像は読み上げを邪魔しない設定か確認してください。
問題があれば画像URLと表示位置を報告してください。
画面がきれいなら、メニューやボタンは押さなくても大丈夫ですか？リンク先は変えていません。
CSS変更でも、透明な要素が重なって押せなくなることがあるよ。メニューを開く、リンクを押す、戻るまで試そう。
問い合わせフォームは、本番で送ると本当にメールが届いてしまいますね。
入力画面やエラー表示までは確認できるけれど、本番送信は外部への影響がある。テスト環境か許可された宛先で行う、と分けて依頼しよう。
見た目の次にメニューとリンクを触る
- スマホメニューを開閉し、背景の本文が意図せず動かないか見る。
- 目次から各見出しへ移動し、固定ヘッダーで見出しが隠れないか見る。
- 主要ボタンを押し、想定URLへ移動するか確認する。
- 外部リンクの別タブ、広告リンクの属性、戻る操作を確認する。
- フォームは許可なく本番送信せず、入力・エラー表示・送信先確認を分ける。
修正依頼は「現象・場所・期待・残すもの」で書く
公開URL：【URL】
再現幅：390px
現象：【料金表の右端がページ外へ出て、ページ全体が横に動く】
場所：【料金比較の見出し直後】
期待する結果：【ページ全体は横に動かず、表の全列は枠内スクロールで読める】
残すもの：【表の文言、列順、PC表示、ほかの表】
確認方法：【390px・768px・1280pxで横幅を測り、全列を目視する】
まず原因となるHTMLとCSSを特定してください。共通CSSへ影響する場合は変更前に報告してください。修正後は同じ三幅で再確認してください。
「スマホを直して」ではなく、390pxで料金表がページを押し広げる、と書けました。表の文章とPC表示は残すことも伝えます。
それならCodexも原因を探しやすいね。直した後に同じ幅・同じ場所を再確認できるのも大きいよ。
確認中に、関係ないページの画像切れも見つけたら一緒に直しますか？
今回は場所と重要度だけ記録しよう。対象ページの合格を先に確定し、別ページは次の依頼に分けると結果を混同しないよ。
公開前と公開後は同じ項目をもう一度見る
プレビューで正常でも、公開後はキャッシュ、圧縮、広告、遅延読込み、実URLのCSSが加わります。公開前検査だけで完了にせず、本番URLで同じ確認を繰り返します。
| 確認 | 公開前 | 公開後 |
|---|---|---|
| 画面幅 | プレビューを三幅で確認 | 公開URLを三幅で再確認 |
| 画像 | プレビュー内で読込み | 遅延読込み・配信URLまで確認 |
| リンク | 遷移先候補を確認 | 実際の公開URLで押す |
| キャッシュ | 通常は影響が少ない | 旧表示との差を確認 |
| 記録 | 未公開と明記 | 公開済み・確認済みを分ける |
Codexへ渡す最終確認の依頼文
対象の公開URLを390px、768px、1280pxで先頭から末尾まで確認してください。
必須確認：
・ページ全体の横スクロール
・画像切れと縦横比
・表の全列と枠内スクロール
・コード例の左内余白と長い行
・会話の画像、名前、吹き出し
・メニューの開閉
・目次と主要リンクの遷移
・ボタンの文字切れと押せる状態
問題はURL、画面幅、見出し、要素、再現結果をセットで報告してください。
対象内の修正後は同じ項目を再検査し、「修正済み」「公開済み」「公開後確認済み」「未実施」を分けてください。
公開環境がまだない人へ
ブラウザ表示の練習はローカル環境でもできます。一般の読者が見る本番URLをこれから用意する人だけ、サーバーの料金、バックアップ、SSL、復元方法を確認してください。
エックスサーバー
WordPressの公開先をまだ持っていない人だけが確認できる候補です。表示確認の方法を学ぶだけなら契約は必要ありません。
不要な人： 現在のサーバーでPC・スマホ表示を確認できている人は乗り換え不要です。
注意点： Codexとは別契約です。料金、契約期間、更新額、バックアップ条件を申込画面で確認してください。
公開環境の条件を確認する広告・PRを含みます。
よくある質問
スマホ一台で確認すれば十分ですか？
入口にはなりますが、画面幅の境界で崩れ方が変わります。少なくとも狭い幅、中間、PCを比べ、崩れが始まる前後も確認します。
スクリーンショットだけで検査できますか？
見た目の発見には使えますが、横幅の数値、画像読込み、メニュー開閉、リンク遷移は実ブラウザでも確認します。
表の横スクロールは不具合ですか？
表の枠内だけが動き、全列を読めるなら有効な設計です。ページ全体まで左右へ動かないことを確認してください。
横はみ出しを隠せば直りますか？
情報やボタンまで切れる可能性があります。バーが消えたことだけでなく、全文と操作要素が読めることを確認します。
画像切れはどう判断しますか？
ページ末尾までスクロールし、各画像が読み込まれ、自然な縦横比で表示されるか確認します。画像URLと表示位置も記録します。
本番フォームを送信してよいですか？
許可なく送信しません。入力とエラー表示、実送信、メール到着は別の検査です。テスト環境か許可済み宛先で実施します。
修正後にPC表示も見直しますか？
見直します。スマホ向けCSSの変更がPCやタブレットへ影響していないか、同じ三幅で回帰確認します。
公開ボタンを押したら完了ですか？
公開URLでキャッシュを含む実表示を確認してから完了です。公開済みと公開後確認済みを分けて報告します。
画面を見るだけでなく、幅を決めて測り、画像やメニューを実際に確認する流れが分かりました。直した場所を同じ条件でもう一度見るんですね。
そうだね。「見た・測った・触った」を一組にすると、見た目だけ正常な不具合を減らせるよ。
公開後に古い見た目が出たら、すぐCSSをまた直すのではなく、キャッシュかどうかも確認します。
その判断で大丈夫。公開前後の差を記録し、原因を一つずつ切り分ければ、慌てて変更を重ねずに済むよ。
最後に：同じ条件で再確認し、結果を記録する
表示崩れの確認は、PCとスマホの画像を保存するだけではありません。画面幅を固定して全体を見て、横幅と部品を測り、メニューやリンクを実際に触ります。不具合は現象、場所、期待、残すものをセットで伝えてください。
公開判断まで進む場合は、先に バックアップ完全チェックリスト を確認し、公開後も同じ検査を繰り返します。