AIが生成したサイトが「画面を少し狭くすると崩れる」典型パターンと直し方

生成AIに作らせたサイトを、パソコンの画面をぐっと狭くしてみたら急に崩れた——という経験をした方は少なくないはずです。

崩れの多くは、AIの実力不足というより、CSSの初期設定と「そう見えるはずの意図」のズレから起きます。この記事では、生成AIが書いたコードでよく見かける3つの崩れパターンと、直すときの考え方を紹介します。

崩れている状態

直った状態

原因1：複数列に折り返すはずの行が、折り返さずに縮んでいる

「項目名と値」のような並びを2列で見せたいとき、AIはそれぞれの幅を「50%」のように指定してくれます。ところが、横に並べる行そのものに「折り返してよい」という指定（flex-wrap）が入っていないと、2つの項目は折り返さずに1行へ押し込まれ、幅だけがどんどん縮んでいきます。

見分け方は簡単です。画面を狭めていったときに、文字が1文字ずつ縦に折り返すほど窮屈になる場合は、たいていこのパターンです。並べる行に「折り返しを許可する」設定が入っているか確認しましょう。

原因2：計算式で書いた幅が、途中の画面幅で更新されない

「全体の50%からすき間の分だけ引く」というような計算式で幅を書くこと（CSSのcalc()）は、AIが書くコードでもよく使われます。ブラウザでそのまま見ている分には問題なく動きますが、コードをそのまま別のツールに読み込んで固定の数値に変換するような使い方をすると、計算した時点の画面幅の数値のまま固定されてしまうことがあります。

その場合、変換した時点より狭い画面では数値が足りなくなり、逆に広い画面では余ってしまいます。ツールをまたいで運用する予定があるなら、計算式に頼った幅よりも、単純な割合（%）や、あらかじめ用意された「◯分の1」のような指定のほうが、扱いを間違えにくくなります。

原因3：横並びの中身に「縮んでよい」の指定が無い

CSSでは、横に並べた要素は指定がなくても自動的に縮んで収まろうとするのが本来の初期設定です。ところが変換・自動生成の過程でこの初期設定が引き継がれず、「縮まない」扱いになってしまうことがあります。その場合、並べたものの合計幅が画面より広くなった瞬間、行ごと画面の外へはみ出します。

対処は、はみ出している行の中身に、伸び縮みしてよいことを明示することです。アイコンや日付のような幅を保ちたい小さな要素だけは固定のままにし、それ以外の要素には「伸縮してよい」と指定する、という切り分けが基本になります。

確認するときのコツ

崩れているように見えても、原因はだいたい上の3つのどれかです。次の順番で見ていくと切り分けやすくなります。

• 画面を少しずつ狭めて、崩れ始める幅を特定する
• 崩れているのが「複数列で並ぶはずの行」か「単に横並びの行」かを見分ける
• 幅の指定が計算式（calc）になっていないか確認する
• 折り返し・伸縮の指定が、並べている要素の親と子のどちらにあるべきかを整理する

まとめ

「途中の画面幅でだけ崩れる」という症状は、パッと見の派手さがないぶん見落とされがちですが、原因はいつも似たパターンに収まります。折り返し・計算式の幅・伸縮の指定という3つの点検ポイントを覚えておくと、生成AIが書いたコードの崩れはかなりの割合で自分で直せるようになります。