Box-Sizing：Content-BoxとBorder-Box
box-sizingによって、widthとheightの計算にpaddingとborderが含まれる方法が変わる仕組みを理解します。
「Box-Sizing：Content-BoxとBorder-Box」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
box-sizingの問題
デフォルトでは、CSSのwidthはコンテンツ領域だけに設定されます。パディングやボーダーを追加すると要素の実際の描画サイズが大きくなるため、混乱やエラーの原因になります。
<div class="box">200px + padding + border = 244px rendered</div>
content-box（デフォルト）
box-sizing: content-boxがデフォルトです。widthとheightはコンテンツのみに適用されます。パディングとボーダーはその上に追加されるため、設定したサイズを超えて要素が大きくなります。
border-box
box-sizing: border-boxでは、widthとheightにコンテンツ + パディング + ボーダーが含まれます。パディングやボーダーの有無にかかわらず、要素は宣言したサイズを正確に維持します。
<div class="box">Exactly 200px rendered width</div>
ユニバーサルな border-box リセット
広く推奨されているリセットを使って、border-boxをすべての要素に適用します。
<div class="demo-box">Width stays exactly 200px</div>
* ではなく inherit を使う理由
必要に応じてコンポーネントでbox-sizingを上書きできる別のパターンもあります。
<div class="demo-box">Inherited border-box sizing</div>
パーセンテージ幅 + パディング
border-boxの主な実用上の利点は、パーセンテージで幅を指定する場合にあります。20pxのパディングを持つwidth: 50%の要素は、オーバーフローせず、親要素のちょうど50%の幅を維持します。
<div class="col">50% wide column with padding, no overflow</div>
border-box に margin は含まれない
border-boxの場合でも、宣言した幅にmarginは含まれません。マージンは常に要素の外側に、設定された寸法とは別にスペースを追加します。
歴史：なぜ content-box がデフォルトなのか
かつて、ブラウザーによってボックスモデルの扱いが異なっていました。W3Cはcontent-boxを標準化しましたが、IEはborder-boxを使用していました。現在のCSSはW3C準拠のためcontent-boxをデフォルトにしていますが、ほぼすべてのプロジェクトでborder-boxに上書きしています。
DevTools でボックスモデルを確認する
Chrome DevToolsのElementsパネルには、コンテンツ、パディング、ボーダー、マージンの正確な寸法を示すボックスモデルの図が表示されます。サイズに関する問題をデバッグする最も速い方法です。
Grid と Flexbox は内部的に border-box を使用する
CSS GridとFlexboxは、要素自身のbox-sizingの設定にかかわらず、常にborder-boxの扱いでトラックとアイテムのサイズを決定します。これにより、サイズ計算を予測しやすくなります。
border-box での min/max
min-width、max-width、min-height、max-heightはwidthと同じように機能します。border-boxが有効な場合、パディングとボーダーが含まれます。
理解度チェック
box-sizing: border-boxで、width: 300px; padding: 30px;と宣言された要素のコンテンツ領域の幅は次のうちどれですか。
まとめ
box-sizing: border-boxは宣言した幅にパディングとボーダーを含めるため、予期しないサイズの拡大を防ぎます。*, *::before, *::after { box-sizing: border-box }を使って全体に適用します。どちらのボックスモデルでも、マージンが含まれることはありません。
よくある質問
「Box-Sizing：Content-BoxとBorder-Box」レッスンは無料ですか？
はい。「Box-Sizing：Content-BoxとBorder-Box」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「Box-Sizing：Content-BoxとBorder-Box」で何を学びますか？
box-sizingによって、widthとheightの計算にpaddingとborderが含まれる方法が変わる仕組みを理解します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「Box-Sizing：Content-BoxとBorder-Box」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Width、Height、Margin、Paddingの理解
- ボーダーのスタイル、幅、色
- Box-Sizing：Content-BoxとBorder-Box
- OutlineとBox-Shadow