CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのbox-sizingプロパティとは？ボックスサイズの計算方法をわかりやすく解説

CSSのbox-sizingプロパティは、要素の幅（width）と高さ（height）の計算方法を変更するために使用される重要なプロパティです。デフォルトの挙動では、指定したwidthやheightにpaddingやborderが追加されてしまうため、意図したレイアウトにならないことがあります。

従来のボックスサイズの計算方法

CSS2以降、ボックスモデルは以下のように計算されてきました。

width + padding + border = 要素の実際に表示される幅
height + padding + border = 要素の実際に表示される高さ

つまり、width: 300pxと指定しても、paddingやborderを加えると実際の表示幅は300pxより大きくなります。この挙動がレイアウト崩れの原因になることも少なくありません。

box-sizingプロパティでできること

box-sizingプロパティを使うことで、この計算方法を変更できます。主な値は以下の2つです。

  • content-box（初期値）：width・heightはコンテンツ領域のみに適用され、paddingとborderはその外側に追加されます。
  • border-box：width・heightにpaddingとborderが含まれます。指定したサイズがそのまま要素全体のサイズになります。

box-sizingの使用例

box-sizingプロパティの動作を理解するために、具体的なコード例を見てみましょう。

<html>
   <head>
      <style>
         .div1 {
            width: 300px;
            height: 100px;
            border: 1px solid blue;
            box-sizing: border-box;
         }
         .div2 {
            width: 300px;
            height: 100px;
            padding: 50px;
            border: 1px solid red;
            box-sizing: border-box;
         }
      </style>
   </head>
   <body>
      <div class = "div1">TutorialsPoint.com</div></br>
      <div class = "div2">TutorialsPoint.com</div>
   </body>
</html>

コードの解説

この例では、両方のdiv要素にbox-sizing: border-box;を指定しています。

  • .div1：paddingなしでborderのみ指定しているため、表示サイズは幅300px・高さ100pxになります。
  • .div2：padding 50pxを指定していますが、border-boxが適用されているため、paddingを含めても全体のサイズは幅300px・高さ100pxのまま変わりません。コンテンツ領域だけが縮小されます。

もしbox-sizingを指定しなければ、.div2の実際の表示幅は「300px + 50px×2 + 1px×2 = 402px」となり、.div1との間に大きな差が生じてしまいます。

実務での活用ポイント

多くのWeb開発者は、すべての要素に対してborder-boxを適用するために、以下のようなリセットCSSを使用しています。

*, *::before, *::after {
  box-sizing: border-box;
}

これにより、paddingやborderを追加してもレイアウトが崩れず、直感的なサイズ指定が可能になります。レスポンシブデザインやグリッドレイアウトでは特に効果的です。

  1. CSSのwidth・heightプロパティの使い方を徹底解説！基本構文と実用例

    CSSでは、height（高さ）プロパティとwidth（幅）プロパティを使用して、要素のコンテンツ領域のサイズを指定できます。ただし、これらのプロパティで設定した値には、マージン（margin）、パディング（padding）、ボーダー（border）は含まれない点に注意しましょう。つまり、ボックス全体のサイズではなく、あくまで中身のコンテンツ部分に対してのみ高さと幅が適用されます。 height・widthプロパティの構文 CSSのheightプロパティは、次のように記述します。 Selector {     height: /*値*/ } CSSのwi

  2. CSSで要素の幅と高さを指定する方法！height・widthプロパティの基本と実例

    CSSの height プロパティと width プロパティは、それぞれ要素の高さと幅を指定するために使用されます。また、max-height、max-width、min-height、min-width プロパティを使えば、これらのサイズに上限値や下限値を設定することも可能です。 基本構文 CSSの height および width プロパティの基本的な書き方は以下の通りです。 Selector {    height: /*値*/    width: /*値*/ } 要素の実際のサイズの計算方法 要素の実際の表示サイズは、width や height