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は別途追加されます。
border-box：width・heightにpaddingとborderが含まれるため、指定したサイズどおりに表示されます。

サンプルコード

以下は、box-sizingを使用してボックスの幅を設定するCSS3のコード例です。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
    width: 200px;
    height: 200px;
    display: inline-block;
}
.contentBox {
    padding: 50px;
    border: 1px solid rgb(255, 0, 128);
}
.borderBox {
    box-sizing: border-box;
    padding: 50px;
    border: 1px solid rgb(194, 0, 194);
}
</style>
</head>
<body>
<h1>CSSによるbox-sizingの例</h1>
<div class="contentBox">
このdivにはbox-sizingプロパティがないため、大きく見えます
</div>
<div class="borderBox">
このdivにはbox-sizingプロパティが設定されています
</div>
</body>
</html>

実行結果

上記のコードを実行すると、次のような出力が得られます。

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

この例では、両方のdiv要素に同じwidth（200px）とheight（200px）、padding（50px）、border（1px）を指定しています。しかし、.contentBoxクラスの要素はbox-sizingを指定していないため、paddingとborderが幅・高さに上乗せされ、実際の表示サイズは302px×302pxになります。一方、.borderBoxクラスの要素はbox-sizing: border-box;を指定しているため、paddingとborderがwidth・heightに含まれ、見た目のサイズはちょうど200px×200pxに収まります。

使い分けのポイント

レイアウトを組む際、border-boxを指定しておくと「指定した通りのサイズ」で要素が表示されるため、グリッドレイアウトやカラム設計が格段に楽になります。多くの開発現場では、全要素に対して一括で適用するために以下のようなリセットCSSが使われることも一般的です。

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

このようにbox-sizingを理解して使いこなすことで、予期しないレイアウト崩れを防ぎ、より正確で保守しやすいCSS設計が可能になります。

CSSでホバー時に要素を表示する方法【サンプルコード付き】

CSSだけでツールチップを作成する方法をわかりやすく解説

CSS3フレキシブルボックスレイアウト（Flexbox）の基本と使い方
CSS3には「フレキシブルボックス（Flexible Box）」と呼ばれるレイアウトモードが用意されており、一般的にFlexbox（フレックスボックス）として知られています。Flexboxを活用すれば、複雑なWebアプリケーションやWebページのレイアウトも、従来のfloatやpositionを使った手法に比べて、はるかに簡単かつ柔軟に構築できます。Flexboxは「コンテナ（親要素）」と「フレックスアイテム（子要素）」で構成されます。コンテナに指定できる主なプロパティは以下のとおりです。flex-direction：アイテムが並ぶ方向（主軸の向き）を指定しますflex-wrap：アイテムの折
CSSだけで実現するスムーススクロールの書き方
CSSのscroll-behaviorプロパティを使うと、アンカーリンクによるページ内移動時のスクロール動作を、JavaScriptに頼ることなく純粋なCSSだけで制御できます。値にsmoothを指定すれば、クリック一つで目的地までなめらかにアニメーションしながらスクロールします。 scroll-behaviorプロパティの主な値 auto:ブラウザの標準動作。リンクをクリックすると瞬時に目的の位置へジャンプします。 smooth:滑らかなアニメーションを伴ってスクロールします。このプロパティはChrome、Firefox、Edge、Safariなどの主要ブ