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

CSS2のサイズ指定プロパティとCSS3のbox-sizingプロパティの違い

CSSでは、要素の幅や高さをどのように計算するかによって、レイアウトの結果が大きく変わります。ここでは、CSS2まで標準だったサイズ指定の挙動と、CSS3で導入された box-sizing プロパティを使った場合の違いを、コード例とともにわかりやすく解説します。

CSS2のサイズ指定プロパティ

CSS2では、width や height で指定した値はコンテンツ領域のみに適用されます。そのため、padding（内側の余白）や border（枠線）を設定すると、その分だけ要素全体の表示サイズが大きくなります。

次の例では、どちらのdivも幅200px・高さ100pxを指定していますが、div2には50pxのパディングがあるため、実際の表示サイズは300px × 200pxになります。

<html>
<head>
  <style>
    .div1 {
      width: 200px;
      height: 100px;
      border: 1px solid green;
    }
    .div2 {
      width: 200px;
      height: 100px;
      padding: 50px;
      border: 1px solid pink;
    }
  </style>
</head>
<body>
  <div class="div1">TutorialsPoint.com</div><br>
  <div class="div2">TutorialsPoint.com</div>
</body>
</html>

CSS3のbox-sizingプロパティ

CSS3で導入された box-sizing: border-box; を指定すると、width と height の値にパディングとボーダーが含まれるようになります。これにより、パディングやボーダーを追加しても、要素の外側のサイズは変わりません。

次の例では、div1とdiv2のどちらも幅300px・高さ100pxとして指定しています。box-sizing: border-box; が設定されているため、div2に50pxのパディングがあっても、表示サイズはどちらも同じ300px × 100pxになります。

<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>

両者の違いのまとめ

項目CSS2（content-box）CSS3（border-box）
width / height の対象コンテンツ領域のみコンテンツ＋パディング＋ボーダー
padding追加時の挙動要素全体が大きくなる外側のサイズは変わらない
レイアウトの予測性サイズ計算が必要で扱いにくい直感的で管理しやすい

実務においては、レイアウトを予測しやすくするために、全要素に対して box-sizing: border-box; を適用することが広く推奨されています。特にレスポンシブデザインやグリッドレイアウトでは、この指定によって意図しないサイズのずれを防ぐことができます。

  1. CSS3のbox-sizingプロパティでボックスの幅と高さを自在に制御する方法

    CSS3のbox-sizingプロパティを使うと、要素の幅（width）だけでなく高さ（height）の計算方法も変更できます。通常、CSSでwidthやheightを指定した場合、その値はコンテンツ領域のみに適用され、paddingやborderを追加すると実際の表示サイズはそれ以上に膨らみます。しかし、box-sizingを活用すれば、paddingやborderを含めた全体サイズを意図どおりにコントロールできるようになります。box-sizingの主な値content-box（初期値）：width・heightはコンテンツ領域のみに適用され、paddingとborderは別途追加されます

  2. CSS3のtransitionショートハンド（短縮）プロパティの使い方

    CSSのtransitionショートハンド（短縮）プロパティを使うと、transition-property（遷移対象のプロパティ）、transition-duration（遷移にかかる時間）、transition-timing-function（変化の速度カーブ）、transition-delay（遅延時間）という4つの個別プロパティを、たった1行にまとめて指定することができます。値は「プロパティ名 → 時間 → タイミング関数 → 遅延」の順にスペース区切りで記述します。複数のプロパティを同時にアニメーションさせたい場合は、それぞれの指定をカンマ（,）で区切って並べます。記述例以下は、tr