Box-Sizing プロパティ
最終更新：2026-09-13
box-sizing Box-Sizing プロパティ
box-sizing プロパティは width と height がどう計算されるかを決定し、CSS ボックスモデルを理解する鍵です。初期値の content-box はコンテンツ領域だけをサイズとし、padding と border がその上に加算されます。border-box は指定した width と height の中に padding と border を含み、より直感的です。現代のプロジェクトでは border-box をグローバルに設定するのが一般的です。
| カテゴリ | |
|---|---|
| 初期値 | content-box |
| 継承 | いいえ |
| 適用対象 | all |
| アニメーションタイプ | discrete |
| CSS バージョン | CSS3 |
| 状態 | 標準 |
📝 構文
box-sizing: content-box | border-box;⚙️ 値
| 値 | タイプ | 説明 |
|---|---|---|
content-box | キーワード | width/height はコンテンツ領域のみを含む（既定）。 |
border-box | キーワード | width/height はコンテンツ・padding・border を含む。 |
▶ 例
以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：
🌐 ブラウザーサポート
| ブラウザー |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| box-sizing | ✓ v10 | ✓ v12 | ✓ v29 | ✓ v5.1 | ✓ v7 |
| すべての主要ブラウザーでサポート | |||||
ヒント： すべての要素を一貫してサイズし、レイアウトの予期せぬ変化を防ぐために、*{box-sizing:border-box} をグローバルに設定することをお勧めします。
❓ よくある質問
Qcontent-box と border-box の違いは何ですか？
A既定の content-box では width はコンテンツ領域だけを指し、padding と border はその外側に加算されるため、自分で計算が必要です。border-box では width に既に padding と border が含まれるため、設定した width が最終的な表示幅となり、コンテンツは内側に縮みます。border-box はより直感的なので、現代のプロジェクトはすべての要素に対してグローバルに有効化しています。
Qなぜ皆が border-box を推奨するのですか？
Aborder-box はレイアウト計算を単純にします。width:200px は要素が占める実際のスペースになり、padding と border はボックスを広げてレイアウトを乱す代わりに内側へ押し込まれます。これはパーセンテージ幅と固定 padding を組み合わせるレスポンシブレイアウトで特に価値があり、溢れを防ぎます。だからこそ *{box-sizing:border-box} というグローバルリセットがフレームワークやほぼすべてのモダン CSS リセットで広く推奨されているのです。
Qすべての要素をグローバルに border-box に設定するにはどうすればよいですか？
ACSS の冒頭に以下を追加します： *, *::before, *::after { box-sizing:border-box; }。これですべての要素と疑似要素に border-box が適用されます。ただし一つ注意点：フォームコントロールなどのサードパーティ製コンポーネントが既定の content-box の挙動に依存している場合、グローバルな上書きで表示が変わることがあります。その場合は該当コンポーネントだけ content-box に戻してください。この1行のリセットで、レイアウトのバグの一連の原因が消えます。
Q既定で border-box になっている要素はどれですか？
Aほとんどのブラウザで、input、textarea、select、button などの一部のフォームコントロールは既定で border-box になり、input の高さには枠線が既に含まれます。それ以外はすべて content-box が既定です。ブラウザーによってフォームコントロールの既定 box-sizing に歴史的に相違があったため、UI フレームワークがリセットスタイルで box-sizing を正規化するのです。上書きしない限り、どこでも content-box と仮定するのが最も安全な考え方です。
🏷️ 関連プロパティ
💡 関連事例
📚 関連チュートリアル
