幅指定したのに要素がはみ出すときの対処（box-sizing）

なぜ幅を指定したのにはみ出すのか

CSSの初期値である box-sizing: content-box では、widthはコンテンツ領域だけの幅を指します。そこに padding と border が外側に足されるため、要素の実際の占有幅は width + padding左右 + border左右 になります。

たとえば width: 100% の要素に padding: 20px と border: 1px を付けると、実寸は親の幅 + 42px になり、親をはみ出します。これが横スクロールバーや右端の見切れの典型的な原因です。

つまり指定した数値が間違っているのではなく、ブラウザの「幅の数え方」が想定とずれているのが本質です。

content-boxとborder-boxの違い

content-box は前述のとおり、widthがコンテンツのみを表し、paddingとborderは外側に加算されます。計算は要素ごとに頭の中でしなければならず、ミスが起きやすいモードです。

border-box は、widthにpaddingとborderを含めて解釈します。width: 100% ならpaddingやborderを足しても要素の総幅は100%のままで、内側でコンテンツ領域が自動的に縮みます。レイアウトが直感的になります。

marginはどちらのモードでもwidthに含まれません。marginは要素の外側のすき間であり、box-sizingの計算対象外である点は覚えておくと混乱しません。

症状別チェック表

幅指定したのに要素がはみ出すは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

はみ出しを直す手順

最も確実なのはプロジェクト全体を border-box に統一することです。次の順で進めると安全です。

1. 開発者ツールで対象要素を選び、Box Modelでwidth/padding/borderの内訳を確認する
2. リセットCSSに *, *::before, *::after { box-sizing: border-box; } を追加する
3. それでも崩れる箇所は、固定widthをやめて max-width: 100% に置き換える
4. 横スクロールが残るなら overflow を一時的に切って、はみ出している要素を特定する
5. 画像やtableなど内在サイズを持つ要素は width: 100%; height: auto を併用する

border-box統一の注意点

全要素にborder-boxを当てるのは現在では一般的で安全な手法ですが、既存の大きなプロジェクトに後から入れると、これまでcontent-box前提で微調整していた箇所のサイズが変わることがあります。

途中導入する場合は、まず特定のコンポーネント単位で box-sizing: border-box を適用し、表示を確認しながら範囲を広げると影響を抑えられます。

ライブラリやフレームワーク由来のCSSがcontent-boxを前提にしている場合もあるため、リセットを入れた後はフォーム部品やボタンの見た目も合わせて確認してください。

修正版をレビュー共有で確認する

はみ出しや横スクロールは、画面幅やデバイスによって出方が変わるため、自分の環境だけでは判断しきれません。修正したページを実際に開いて確認してもらうのが近道です。

ギガサイト便なら、修正したHTMLやZIPをドロップするだけで 〇〇.giga-site.com の共有URLが発行されます。CDNのエッジ配信で表示が速く、スマホの実機でも同じURLからすぐ確認できます。

同じURLのままファイルを差し替えられるため、box-sizingの調整を繰り返すときもリンクを送り直さずに済みます。アクセスログで誰がいつ見たかも追えます。