AIで作ったサイトがスマホで横にはみ出す原因と直し方｜6つの原因を幅375pxで実測

1. 「横にはみ出す」は、ページ全体の幅が画面より広い状態

横にスクロールできてしまう、右端で文字や画像が切れる、勝手に縮小して表示される。これらは、ページ全体の幅（document.documentElement.scrollWidth）が画面の幅を超えているときに起きます。画面より広い要素が一つでもあれば、ページ全体が広がります。AIが作ったHTMLでも、手で書いたHTMLでも同じです。

この記事では、よくある6つの原因を、幅375pxの画面で実際に測りました。数値は「ページ全体の幅」で、ページ余白は初期値の8pxです。どの要素が幅を押し広げているかを見分ける目安として使えます。

2. 最初に確認する：viewportの設定

スマホ向けの表示には、<head>内のviewport設定が必要です。MDNは、スマホのブラウザが画面より広い仮想の幅（例として980px）でページを描き、縮小して見せることがあると説明しています。この状態では、狭い画面向けのCSSが効きません。推奨されている書き方は次の1行です。

<meta name="viewport" content="width=device-width">

MDNは、initial-scale=1も広く使われているが、通常は必須ではないとしています。一方、拡大を禁止する指定（user-scalable=noやmaximum-scale）は、弱視の人が読めなくなるため、避けるよう警告しています。「横にずれるから、拡大を止める」という直し方は選びません。

3. 6つの原因を、幅375pxで測る

次の表は、Chrome 152（macOS）で、幅375pxの画面を作って測った結果です。直す前は、375pxを超えてはみ出しています。608pxなどの端数は、ページ余白8pxを含む値です。

1. 幅を固定した要素

width:600pxのような固定幅は、画面が狭いと収まりません。上限を画面幅に合わせます。

.box { width: 600px; max-width: 100%; }

2. 区切りのない長い文字列

半角の英数字が区切りなく続く文字列（管理番号やメールアドレスなど）は、途中で折り返されません。測定に使った72文字の英数字は678pxに広がりました。ハイフンを含む長いURLは、ハイフンの位置で折り返され、直さなくても375pxに収まりました。

p { overflow-wrap: anywhere; }

3. 横に長い表

列が多い表は、表そのものが画面より広くなります。表を枠で包み、枠の中だけ横にスクロールさせます。ページ全体は広がりません。

<div class="scroll"><table>…</table></div>

.scroll { overflow: auto; max-width: 100%; }

4. 大きな画像

HTMLのwidth属性に大きな値が入った画像は、画面より広がります。画像の最大幅を枠に合わせ、縦横比は保ちます。

img { max-width: 100%; height: auto; }

5. 100vw

100vwは画面の幅いっぱいです。ブラウザの初期の余白を足すと、画面より広くなります（測定では383px）。幅を親要素に合わせるなら100%を使います。

.band { width: 100%; }

6. flexの中の長い文字列

次の節で説明します。

4. flexの中は、anywhereとbreak-wordで結果が変わる

MDNによると、overflow-wrapのanywhereとbreak-wordは、どちらも長い文字列を途中で折り返せます。違いは、折り返せる位置を「最小の幅」の計算に含めるかどうかです。anywhereは含め、break-wordは含めません。

この違いは、flexの子要素で結果に出ました。区切りのない72文字の文字列を、display:flexの親の子に入れて測っています。

flexやgridの中に長い文字列を入れるときは、anywhereを使うか、子要素にmin-width:0を足します。break-wordだけでは収まらないことがあります。

.row { display: flex; }
.row > div { min-width: 0; overflow-wrap: anywhere; }

5. 「はみ出した部分を隠す」では直らない

ページ全体にoverflow-x:hiddenを指定すると、横スクロールは消えます。ただし、画面の外へはみ出した文字や画像は切り取られ、読めなくなります。画面より広い要素を直す方が、内容を失いません。

6. どの要素が広いかを探す

ブラウザの開発者ツールのコンソールに次を入力すると、画面の右端を超えている要素が一覧で出ます。幅を375pxにした状態で実行してください。

[...document.querySelectorAll('body *')]
  .filter(e => e.getBoundingClientRect().right > innerWidth)
  .map(e => e.tagName + (e.className ? '.' + e.className : ''))

一覧の先頭が、最初に疑う要素です。直したあと、document.documentElement.scrollWidthが画面の幅と同じになれば、横にはみ出していません。

7. AIに修正を頼むときの書き方

「スマホで崩れる、直して」だけでは、AIはデザイン全体を作り直すことがあります。画面幅、広がっている要素、変えたくないことを渡すと、必要な箇所だけ直してもらいやすくなります。

スマホ（幅375px）で、ページ全体が横にスクロールできます。
・確認した画面幅：375px、320px
・広がっている要素：（例）料金表の表、トップの画像
・変えたくないこと：PCでの見た目、文章の内容
・直し方：広がっている要素にだけ max-width や overflow を指定する。bodyにoverflow-x:hiddenは使わない
・直したあと：document.documentElement.scrollWidth が画面幅と同じか、確認方法も教えてください

返ってきた修正は、幅320px・375px・414pxで確認します。公開前の手順は、公開前チェックとチェックリストにまとめています。