ボックスサイズ

CSSでは、box-sizingは要素の幅と高さの合計がどのように計算されるかを決定するプロパティです。デフォルトでは、widthプロパティとheightプロパティにはコンテンツのサイズだけが含まれ、パディング、境界線、マージンは考慮されません。ただし、box-sizingプロパティを使うと、この動作を変更し、widthプロパティとheightプロパティにパディングと境界線のサイズも含めることができます。

これにより、レイアウトの計算が簡単になり、予期しないサイズの問題を防ぐことができます。

box-sizingプロパティを使用する基本的な構文は次のとおりです。

selector {
    box-sizing: value;
}

value: 希望するボックスサイズの動作。次のいずれかを指定できます。

• content-box: これはデフォルト値です。width プロパティと height プロパティには、コンテンツのサイズのみが含まれます。パディング、境界線、マージンは、指定された幅と高さの外側に追加されます。

• border-box: width プロパティと height プロパティには、コンテンツ、パディング、ボーダーのサイズが含まれます。マージンは引き続き要素の外側に追加されます。

例:

div {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: content-box; /* デフォルトの動作 */
}

.container {
    width: 400px;
    height: 300px;
    padding: 30px;
    border: 10px solid red;
    box-sizing: border-box;
}

この例では、<div>要素のbox-sizingの値はcontent-boxです。つまり、<div>の実際のレンダリング幅は300px（コンテンツ）+ 40px（左右のパディング）+ 10px（左右のボーダー）= 350pxになります。高さも同様に計算されます。

一方、クラス container を持つ要素の box-sizing の値は border-box です。この場合、指定された width の 400px には、コンテンツ、パディング、ボーダーが含まれます。パディングとボーダーを収めるために実際のコンテンツ領域が縮小し、コンテンツの幅は 400px - 60px（左右のパディング） - 20px（左右のボーダー） = 320px となります。高さも同様に計算されます。