---
title: "幅指定したのに要素がはみ出すときの対処（box-sizing）"
description: "width:100%を指定したのにpaddingやborderを加えたとたん要素が親からはみ出すと困っている方向け。box-sizingのデフォルト仕様と、border-boxへの切り替え方法を解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/box-sizing-width-overflow"
markdown: "https://giga-site.com/articles/box-sizing-width-overflow/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# 幅指定したのに要素がはみ出すときの対処（box-sizing）

width: 100% を指定したのに、paddingやborderを足したとたん要素が親からはみ出して横スクロールが出る。これはCSSの幅計算がデフォルトでpaddingとborderを含まない仕様(content-box)だからです。box-sizingを切り替えれば直感どおりに直せます。

> Source HTML: https://giga-site.com/articles/box-sizing-width-overflow
> Article index: https://giga-site.com/articles/index.md

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

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の調整を繰り返すときもリンクを送り直さずに済みます。アクセスログで誰がいつ見たかも追えます。

## よくある質問

### box-sizingにはmarginも含まれますか

いいえ。box-sizingはwidth/heightにpaddingとborderを含めるかを決めるだけで、marginは含みません。marginは要素の外側のすき間として、どのモードでも幅計算の外にあります。

### 全要素にborder-boxを当てても大丈夫ですか

新規プロジェクトでは推奨される手法です。*セレクタと擬似要素にまとめて適用するのが一般的です。既存プロジェクトに後から入れる場合は、サイズが変わる箇所が出るので段階的に確認しながら導入してください。

### width: 100% にしても余白で右がはみ出します

content-boxのままpaddingやborderが外側に足されているか、親要素にpaddingがあるのに子がwidth:100%になっている可能性があります。border-boxにするか、widthを使わず親のpaddingにレイアウトを任せると解決します。

### 画像が親からはみ出すのもbox-sizingの問題ですか

画像は内在の幅を持つため、box-sizingとは別に max-width: 100%; height: auto を指定して親に収まるようにするのが基本です。box-sizingの統一と併せて行うと安定します。

### 原因が分からないときはどこから確認すべきですか？

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

## 関連記事

- [表（table）が画面からはみ出すときの対処](https://giga-site.com/articles/table-overflow/index.md)
- [長い英数字・URLがはみ出して折り返さないときの対処](https://giga-site.com/articles/long-text-overflow-no-wrap/index.md)
- [overflow:hiddenで中身が切れて見えないときの対処](https://giga-site.com/articles/overflow-hidden-content-cut/index.md)
- [ボックスモデルとは？余白とサイズの基礎(margin/padding)](https://giga-site.com/articles/what-is-css-box-model/index.md)
- [ボックスモデルとは？余白・枠・幅の関係をやさしく解説](https://giga-site.com/articles/box-model-term/index.md)
- [公開後にJavaScriptが動かないときの原因と直し方](https://giga-site.com/articles/javascript-not-working/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "幅指定したのに要素がはみ出すときの対処（box-sizing）",
  "description": "width:100%を指定したのにpaddingやborderを加えたとたん要素が親からはみ出すと困っている方向け。box-sizingのデフォルト仕様と、border-boxへの切り替え方法を解説します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/box-sizing-width-overflow",
  "url": "https://giga-site.com/articles/box-sizing-width-overflow",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "box-sizingにはmarginも含まれますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "いいえ。box-sizingはwidth/heightにpaddingとborderを含めるかを決めるだけで、marginは含みません。marginは要素の外側のすき間として、どのモードでも幅計算の外にあります。"
      }
    },
    {
      "@type": "Question",
      "name": "全要素にborder-boxを当てても大丈夫ですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "新規プロジェクトでは推奨される手法です。*セレクタと擬似要素にまとめて適用するのが一般的です。既存プロジェクトに後から入れる場合は、サイズが変わる箇所が出るので段階的に確認しながら導入してください。"
      }
    },
    {
      "@type": "Question",
      "name": "width: 100% にしても余白で右がはみ出します",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "content-boxのままpaddingやborderが外側に足されているか、親要素にpaddingがあるのに子がwidth:100%になっている可能性があります。border-boxにするか、widthを使わず親のpaddingにレイアウトを任せると解決します。"
      }
    },
    {
      "@type": "Question",
      "name": "画像が親からはみ出すのもbox-sizingの問題ですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "画像は内在の幅を持つため、box-sizingとは別に max-width: 100%; height: auto を指定して親に収まるようにするのが基本です。box-sizingの統一と併せて行うと安定します。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```