テスト
期待した動きになっているかを確かめることです。
AIでサービスをつくる、非エンジニアのための実践ガイド
困りごとナビ
スマホで画面が横にはみ出す
横スクロールの原因になっている要素を特定し、PC表示を壊さず整えます。
危険度: 通常スマホ表示
今すぐ使う
まず、状況をそろえる
自分の状況と近いかを確かめ、最初の確認をしてからAIへ頼みます。
AIへの依頼文
スマホで横にはみ出すときの修正依頼
内容と対象をひと目確認してから使うと安心です。
分かる範囲で2か所だけ
自分の状況を入れる
空欄のままでもコピーできます。秘密情報は書かずにお試しください。
コピーされる依頼文を確認
目的:
スマートフォン幅で横スクロールが出る要素を特定し、自然に収まる最小変更を行う。
現在の状態:
【ここに、何をしたらどうなったかを書く】
今回依頼すること:
指定した画面をスマートフォン幅で確認し、画面幅を超えている最初の要素を特定してください。固定幅、長い文字列、余白、画像、グリッドのどれが原因かを示し、PC表示と読む順番を変えない最小の修正案を出してください。
変更してよい範囲:
【ここに、変更してよい画面やファイルを書く】
変更しない範囲:
内容の削除、文字を極端に小さくする、画面全体を強制的に切り取る、PCレイアウトの全面変更は行わない。
完了条件:
- はみ出している要素と原因が分かる
- スマートフォン幅で不要な横スクロールが出ない
- PC表示とキーボード操作が保たれる
実装前に確認すること:
- 対象とするファイル、現在の差分、関連する設定を読み取り、変更計画を短く示す
- 判断できない点があれば、変更する前に止めて質問する
実装後に報告すること:
- 変更したファイルと変更理由
- 実行した確認と、その結果
- 未解決の点や追加で確認が必要な点この困りごとですか？
スマートフォン幅で、画面全体が横へ動いてしまいますか？
- 右側の文字やボタンが画面外へ切れる
- 画面を左右へ動かさないと読めない
- カードや表だけが画面幅より広い
最初に確認すること
- どの画面幅から横スクロールが出るか確認する
- 最初に画面外へはみ出す要素を一つ探す
- 長いURL、固定幅、画像、横並びのどれかを確認する
確かめる
変更の前後を確認する
実行前と実行後を比べます。分からないまま危険な変更を進めないでください。
始める前
- 問題が出るページとおおよその画面幅を記録する
- PC表示で残したい並びを確認する
試したあと
- 狭い画面で不要な横スクロールが消えた
- 通常のPC幅でもレイアウトが崩れていない
ここで止まる
- 重要な表やコードの横スクロールまで消す必要がある
- 文字を極端に小さくする案しか出ていない
- 複数の主要画面を全面的に作り直す必要がある
理解する
なぜ起きるのかを知る
原因の候補を知ると、同じ問題が起きたときに自分で切り分けやすくなります。
考えられる原因
- 要素へ画面より大きな固定幅が設定されている
- 長い文字列や画像が縮まない
- カードやグリッドが狭い画面でも横並びのままになっている
覚えておくこと
レスポンシブデザイン端末や画面幅に応じて、内容の幅、列数、余白、操作方法を調整する設計です。用語ページで詳しく見る は、画面幅に応じて内容を読みやすく組み替える考え方です。横スクロールを画面全体で隠す前に、幅を超えた最初の要素を直すと原因を残しにくくなります。