【CSS Modules】box-sizingプロパティの使い方
box-sizingプロパティの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
box-sizingプロパティは、CSSの要素が持つボックスモデルにおける、幅（width）と高さ（height）の計算方法を定義するプロパティです。ウェブページのレイアウトを構築する際、各要素は長方形の箱（ボックス）として扱われ、そのサイズはコンテンツ、パディング（内側の余白）、ボーダー（境界線）、マージン（外側の余白）で構成されます。このプロパティは、特にコンテンツ、パディング、ボーダーが要素の最終的なサイズにどのように影響するかを制御します。
このプロパティには主に二つの値があります。一つはデフォルト値である「content-box」です。content-boxが適用されている場合、widthとheightプロパティは要素のコンテンツ領域のサイズのみを定義します。したがって、パディングやボーダーの幅は、指定したwidthとheightに加算され、要素全体の占める領域は指定値よりも大きくなります。例えば、width: 100px; padding: 10px; border: 1px; と指定した場合、要素の実際の幅は 100px + 10px2 (左右) + 1px2 (左右) = 122px となります。
もう一つは「border-box」です。border-boxを指定すると、widthとheightプロパティはコンテンツ領域だけでなく、パディングとボーダーのサイズも含んだ要素全体のサイズを定義します。つまり、パディングやボーダーを追加しても、要素全体の幅や高さは指定した値に保たれます。上記の例でborder-boxを適用した場合、要素の実際の幅は 100px のままで、コンテンツ領域が縮小されることで調整されます。この挙動は、特に柔軟なレイアウトやレスポンシブデザインを作成する際に、要素のサイズ計算をより直感的にし、レイアウトの予測を容易にするため、広く利用されています。要素の寸法を正確に制御し、レイアウトの崩れを防ぐ上で非常に役立つプロパティと言えます。
構文(syntax)
1セレクタ { 2 box-sizing: 値; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません