この記事の目次 開く・閉じる
今回の仕上がり
幅320pxの見本では、内幅316pxに対してカードの内容が520pxありました。「レスポンシブに直す」を押すと、内容も316pxになり、長い英単語が折り返されます。390pxのブラウザ表示でも、ページ全体の横幅が390pxを超えないことを確認しました。
下の画面は、実際に触れる作例です。静止画で動きを再現したものではありません。
作例を別画面で開く → · サンプル一式をダウンロード（ZIP）
必要なものと、試す順番
PCのブラウザから試せます。作例内の幅切り替えは比較用の枠で、実機のスマホではありません。自分のページを確かめるときは、開発者ツールの幅変更と手元の端末を使い分けてください。
- 作例を開き、「見本の幅」が320pxになっていることを確認します。表示された内幅と内容の幅を読みます。
- 点線の枠を横へ動かすと、隠れていた右側が見えます。この作例は問題を観察できるよう、切り捨てずスクロールできる設定にしています。
- 「レスポンシブに直す」を押します。英単語が折り返され、横にはみ出していないという結果へ変わるか確認します。
- 390px、600pxでも見直します。「固定幅へ戻す」で比較できます。広い画面で問題が消えても、狭い画面で直ったとは限りません。
仕組みを知る
隠すと、直ったように見えてしまう
MDNのoverflow解説は、要素の領域に収まらない内容をどう扱うかを整理しています。hiddenは見た目を整える場面もありますが、読ませる本文や操作ボタンが切れる原因を解消する設定ではありません。
今回の問題はカードのwidth: 520pxです。親が320pxでも、子は520pxのままなので広くなります。まずwidth: 100%にして親に合わせます。画像が広いならmax-width: 100%と高さの扱いも見直しましょう。
長い文字列は、幅とは別の問題
カードの幅を変えても、URLや長いファイル名が折り返せず飛び出すことがあります。作例ではoverflow-wrap: anywhereを使い、必要なときに単語の途中でも折り返せるようにしました。日本語の普通の文章だけで確認すると、この問題を見逃しがちです。
FlexboxやGridでは、子の最小幅が縮むのを妨げるケースもあります。その場合はmin-width: 0を試す価値がありますが、何にでも一括指定するのではなく、問題のある子要素へ付けます。表やコードは無理に折り返すより、その範囲だけ横スクロールにする方が読みやすい場合もあります。
コードの要点
.card {
width: 100%;
min-width: 0;
overflow-wrap: anywhere;
}
// 横にはみ出したか、同じ要素で比較する
const overflowed = view.scrollWidth > view.clientWidth;scrollWidthとclientWidthは、同じ要素の内容幅と内側の表示幅です。枠の指定幅320pxと内幅316pxが違うのは、左右の境界線を含むためです。
自作のHTML・CSS・JavaScriptはCC0です。ZIP内のREADMEと、共通のサンプル利用条件をご確認ください。
できたかの確認と、よくあるつまずき
- 狭い幅で、カード内の文章が最後まで見える。
- 長い英単語やURLでもページ全体が横へ広がらない。
- 直した後も、ボタンや見出しを押せる・読める。
ここに注意。bodyのoverflow-x: hiddenだけで済ませると、はみ出したボタンへ届かなくなることがあります。
ここに注意。スマホ幅の再現だけでは、実際のタッチ操作や文字拡大まで確認したことにはなりません。
出典と、確認した範囲
作例の確認日：2026年10月3日。個別の条件と未確認範囲は以下の通りです。共通の検証方法も公開しています。
320pxの見本と390pxのブラウザ表示で幅を測定しました。実機、全ブラウザ、全ての文字拡大設定は未検証です。
MDN：overflow — 内容が領域を超えたときの表示とスクロールの扱い。
MDN：Overflowing content — 固定サイズと、収まりきらない内容の考え方。