AIで作ったカードUIから長いURLがはみ出すときは、外側の幅だけでなく、Flexboxの子要素が縮めるか、文字列を折り返せるかを分けて確認します。カードの幅を狭くしたり、ページ全体の横スクロールを隠したりするだけでは、必要な文字が読めないままになることがあります。
ここでは、バッジと本文を横に並べたカードのHTML・CSSを例に、原因候補と局所的な修正案を整理します。コードは説明用で、特定のAIが生成した結果や、ブラウザで表示を比較した実測ではありません。実際の画面では適用済みのCSSと表示幅を確認してください。
目次
はみ出す要素と、縮めたい要素を区別する
最初に、カード自体が親の幅を超えるのか、カードの中の文字だけが外へ出るのかを見ます。外側の固定幅、余白、画像、子要素の最小幅、文字の折り返しでは確認場所が違います。
今回の構造では、cardが横並びの親、card__badgeが短いラベル、card__bodyが残りの幅を使う本文です。長いURLを含むのはcard__bodyの内側です。子孫のリンクと、Flexboxの直接の子要素を同じものとして扱わないでください。
<article class="card">
<span class="card__badge">資料</span>
<div class="card__body">
<h2>確認用の資料</h2>
<a class="card__url" href="https://example.com/docs/abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz0123456789">https://example.com/docs/abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz0123456789</a>
</div>
</article>
example.comのURLは説明用です。実際の資料へ接続した結果ではありません。URLの表示を折り返すために、リンク先へ空白や改行文字を挿入しないでください。
最小のCSSで、幅の条件を切り分ける
初期状態の例です。本文にはflex: 1を指定していますが、それだけで長い文字列を含むすべての状態が収まるとは限りません。
.card {
display: flex;
gap: 12px;
box-sizing: border-box;
width: 100%;
max-width: 420px;
padding: 16px;
border: 1px solid #aaa;
}
.card__badge {
flex: 0 0 auto;
}
.card__body {
flex: 1;
}
.card__body h2 {
margin: 0 0 8px;
font-size: 1rem;
}
カードにmax-widthがあっても、内部の文字が必ず折り返すわけではありません。また、この例の420pxはカードの最大幅で、ブラウザの画面幅を意味しません。実際の親要素の内側へ、余白やバッジを含めて収まるかを確認します。
子要素の最小幅と、文字の折り返しを別に見る
MDNのmin-widthの説明では、flex itemの自動的な最小幅が、条件によって内容に基づく最小幅などから決まることが示されています。そのため、本文を縮めたい場合は、Flexboxの直接の子であるcard__bodyの最小幅を確認します。「autoは常に0」とは扱いません。MDN：min-width（新しいタブで開く）
一方、overflow-wrap: anywhereは、長い単語やURLを必要に応じて途中で折り返すための指定です。MDNでは、anywhereによる折り返し機会がmin-contentの計算でも考慮されること、break-wordとはその点が違うことも説明しています。MDN：overflow-wrap（新しいタブで開く）
今回の構造で検討する修正案は次です。初期CSSの後へ追加する想定で、既存の同じ指定がある場合は差分を確認します。
.card__body {
min-width: 0;
}
.card__url {
white-space: normal;
overflow-wrap: anywhere;
}
min-width: 0は本文の箱を縮められるようにする指定、overflow-wrapは文字列側の折り返しです。white-space: normalは、このURLを折り返せる扱いにするために明示しています。どれも全画面へ一律に適用せず、対象の要素に絞ります。
この三つが常に全部必要という意味ではありません。anywhereによって内容に基づく幅も変わるため、どの指定が必要かは実際の構造と適用済みCSSで確認します。一つずつ変更し、箱の幅と文字の折り返しをそれぞれ見てください。
nowrapや、別の要素の幅が残っていないか調べる
white-spaceは空白と折り返しを扱う指定です。親や共通スタイルからnowrapが適用されていないかを確認します。MDNではnormalは必要に応じて行を折り返す扱いとして説明されています。MDN：white-space（新しいタブで開く）
修正したはずなのに変わらない場合は、ブラウザの開発者ツールで実際に適用された指定を調べます。別のセレクターに上書きされている、想定したクラスが付いていない、本文のさらに外側のflex itemに最小幅が残る、といった場合を分けます。
表は横にスクロールできます
| 見えている症状 | 確認する場所 | 次の切り分け |
|---|---|---|
| カード自体が親より広い | カードと親のwidth、余白、最小幅 | 内部の文字以前の幅指定を確認 |
| 箱は狭くなるがURLが外へ出る | URLのwhite-spaceとoverflow-wrap | 折り返しの指定と上書きを確認 |
| 本文の箱が縮まない | 直接のflex itemのmin-width | 内容に基づく最小幅を確認 |
| URLを直しても横に広い | 画像、ボタン、別の子孫 | はみ出している実物を特定 |
| 文字が見えなくなっただけ | overflowや省略表示 | 必要な全文を読めるか確認 |
画像の固定幅や、ボタンが並び切らない問題を、URLの折り返しだけで直そうとしないでください。逆に、URLだけが原因のカードを直すために、ページ全体の幅や全ボタンの配置を変える必要があるとも限りません。
内容と表示幅を変えて、修正の影響を見る
確認では、長いURLだけでなく、短いURL、日本語の見出し、空白のない英数字、複数行になる本文を用意します。長いバッジなら残りの本文幅も変わるため、バッジの文字数も変えます。
幅は例えば320・390・768pxの画面条件で確認できますが、カードが置かれる親の実際の内側の幅も記録します。PC画面でも細いサイドバー内に置かれる場合があるため、画面幅だけで合否を決めません。この原稿では、これらの幅での表示は実測していません。
表は横にスクロールできます
| 確認項目 | 見ること |
|---|---|
| 本文 | 文字が切れず、読み進められるか |
| リンク | 表示とリンク先が保持され、操作できるか |
| 横幅 | カードと親に意図しない横スクロールがないか |
| 縦方向 | 折り返しで増えた高さが固定高に隠れないか |
| 周辺 | 隣のカード、バッジ、他のページへ副作用がないか |
文字のサイズを小さくして収める前に、折り返しや配置の条件を確認します。リンクのフォーカス表示や文字サイズを変更した状態も、実際の利用条件で確認してください。CSSの構文が正しいことだけでは、表示や操作が成立した証拠にはなりません。
AIには、構造と変更する範囲を渡す
横並びのFlexboxカードで、長いURLが親の幅からはみ出します。
HTMLと適用済みCSS：［対象部分］。
再現する内容・親の内側の幅：［条件］。
残す条件：URL全文、リンク先、バッジの役割、既存の他画面のスタイル。
直接のflex itemと、文字を折り返す要素を区別して説明してください。
min-width、overflow-wrap、white-spaceのどれが関係するか、根拠と局所的な差分を示してください。
ページ全体でoverflowを隠す変更や、リンク先の文字を変更する案で済ませないでください。
短いURL、長い英数字、日本語、長いバッジで確認する項目も示してください。
実際に表示を確認していない場合は、確認済みと書かないでください。
AIの提案後は、適用するセレクターと影響範囲を読み、本文の箱とURLの両方を確認します。必要な情報が欠けている場合は、推測した画面構造でCSSを追加し続けず、対象要素と適用済みスタイルへ戻ります。
v0で生成したコード全体を編集する場合は、Reactコードを編集するときのポイントで責務と差分を確認してください。既存デザインをもとに作る段階は、既存デザインからUIを作る進め方と分け、今回の症状は該当カードの小さな再現例で調べます。
参考資料
資料の確認日：2026年10月20日。HTML・CSSは説明用です。AI生成、ブラウザでの描画、幅ごとの表示、リンク操作、フォーカス、実プロジェクトへの適用は実測していません。