CSS
box-sizing is a CSS property that specifies the sizing method for an element, with two main values of border-box and content-box to choose from.
box-sizing
box-sizingプロパティは、要素のボックスモデルのボーダー、パディング、コンテンツのサイズの計算方法を制御するためのプロパティです。
box-sizingプロパティは、2つの値を持つことができます。content-boxと border-boxです。
- content-box
- この値はデフォルト値で、コンテンツのサイズに基づいて要素の全体的な幅と高さが計算されます。要素のコンテンツボックスの幅と高さが指定した幅と高さになります。つまり、要素のコンテンツサイズが指定したサイズになり、ボーダーやパディングはそのサイズに加えられます。
- border-box
- この値を指定すると、要素の幅と高さが、コンテンツ、パディング、ボーダーを含んだ全体のサイズに基づいて計算されます。つまり、指定した幅や高さが、コンテンツボックス、ボーダーボックス、パディングボックスを含んだ全体のサイズになります。この値を指定すると、要素のボーダーやパディングを加えた実際の幅や高さを指定することができるため、レイアウトがより簡単になります。
以下の例を見てみましょう。
CSS
.smp1 {
width: 200px;
height: 200px;
padding: 20px;
border: 5px solid black;
background-color: khaki;
}この場合、box-sizingプロパティが指定されていないため、要素の幅と高さはコンテンツボックスのサイズに基づいて計算されます。つまり、コンテンツボックスの幅と高さが200pxで、パディングとボーダーが追加された実際の幅と高さが230pxになります。
しかし、以下のように box-sizingプロパティを border-boxに変更すると、要素の幅と高さはボーダーボックスのサイズに基づいて計算されます。
CSS
.smp2 {
width: 200px;
height: 200px;
padding: 20px;
border: 5px solid black;
background-color: khaki;
box-sizing: border-box;
}この場合、要素の幅と高さは 200pxになります。つまり、コンテンツボックス、パディングボックス、ボーダーボックスを含んだ全体のサイズが指定された幅と高さに一致します。
HTML
<div class="smp1"></div>
<div class="smp2"></div>box-sizingプロパティは、特にレスポンシブデザインのコンテキストで非常に有用です。例えば、要素の幅と高さをパーセンテージで指定した場合、要素の大きさがそのコンテンツのサイズに基づいて変化するため、box-sizingプロパティを border-boxに設定することで、要素の大きさを一定に保つことができます。
また、box-sizingプロパティは、要素の枠線を含めたサイズを考慮する必要がある場合に便利です。例えば、要素にボーダーがある場合、border-boxを使用すると、要素の実際の幅と高さを指定することができます。これにより、ボーダーサイズを考慮した正確なレイアウトを作成することができます。
ただし、注意すべき点もあります。border-boxを使用する場合、パディングやボーダーのサイズが要素のサイズに含まれるため、要素のコンテンツが小さくなり、デザインが崩れることがあります。この問題を回避するために、パディングやボーダーのサイズを考慮したデザインを作成する必要があります。
もう一つの値である content-boxを使用すると、要素の幅と高さは、コンテンツのみのサイズに基づいて計算されます。つまり、パディングやボーダーは要素の幅と高さには含まれず、別途指定する必要があります。
box-sizingプロパティのデフォルト値は content-boxであり、この値を使用した場合、要素のサイズはコンテンツのサイズに基づいて計算されます。したがって、要素にパディングやボーダーを追加する場合は、要素のサイズを調整するために別途指定する必要があります。
また、box-sizingプロパティは、:beforeおよび :after疑似要素にも適用されます。したがって、要素に追加された疑似要素のサイズも box-sizingプロパティに基づいて計算されます。
Browser support
