Box Sizing

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 39/76。

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

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

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

selector {
    box-sizing: value;
}

value: 期待される box-sizing の動作。次のいずれかの値を指定できます：

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 となります。高さも同様に計算されます。

チャレンジ

簡単

2つの異なるクラスを持つ2つの <div> 要素が含まれるHTMLドキュメントが与えられます。あなたのタスクは、box-sizing プロパティを使用して、これらの要素の幅と高さがどのように計算されるかを制御することです。以下の手順に従ってください：

クラス <strong>content-box-div</strong> を持つ <div> 要素をターゲットとするCSSルールを記述します。width を 300px に、height を 200px に、padding を 20px に、border を 5px solid blue に、そして box-sizing を content-box に設定します。
クラス <strong>border-box-div</strong> を持つ <div> 要素をターゲットとするCSSルールを記述します。width を 300px に、height を 200px に、padding を 20px に、border を 5px solid red に、そして box-sizing を border-box に設定します。

チートシート

box-sizing プロパティは、要素の幅と高さの合計がどのように計算されるかを決定します：

selector {
    box-sizing: value;
}

値：

content-box (デフォルト): 幅と高さにはコンテンツのサイズのみが含まれます。パディングとボーダーは外側に追加されます。
border-box: 幅と高さには、コンテンツ、パディング、ボーダーのサイズが含まれます。マージンは依然として外側に追加されます。

/* content-box の例 */
div {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: content-box;
    /* 合計幅: 300px + 40px + 10px = 350px */
}

/* border-box の例 */
.container {
    width: 400px;
    height: 300px;
    padding: 30px;
    border: 10px solid red;
    box-sizing: border-box;
    /* 合計幅: 400px (コンテンツは収まるように縮小されます) */
}

自分で試してみよう

<html>
<head>
    <title>Box Sizing</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="content-box-div">This is a div with content-box.</div>
    <div class="border-box-div">This is a div with border-box.</div>
</body>
</html>