CSSサイズ制御：width・heightプロパティとボックスモデル計算ガイド

JPKODA 編集部 May 6, 2026

CSSの width（幅）と height（高さ）プロパティは、Web要素のサイズを制御するための基礎です。これらを使用することで、ブラウザのデフォルトのレンダリング挙動を上書きし、コンテンツボックスの寸法を明示的に定義できます。

これらのプロパティがボックスモデルとどのように相互作用するかを理解することで、正確かつ予測可能なレイアウトを作成できるようになります。

本章では、width と height を使用する際の詳細を掘り下げ、異なる数値タイプ、それらがボックスモデルに与える影響、およびレスポンシブデザインのベストプラクティスについて探求します。

1. widthプロパティとheightプロパティを理解する

CSSの width と height プロパティは、要素のコンテンツ領域 (Content Area) の幅と高さを指定するために使用されます。

重要なポイント： コンテンツ領域は、パディング (padding)、ボーダー (border)、およびマージン (margin) の内側に位置します。前の章で学んだように、要素の「実際に見えるサイズ」は、これらの追加のレイヤーによって影響を受けることを忘れないでください。

2. widthとheightの指定値

これら2つのプロパティは、以下のような多様なタイプの値を受け入れます。

ピクセル (px)：固定のピクセル数を指定します。精密な制御が可能ですが、レスポンシブデザインにおいては柔軟性に欠けます。
パーセンテージ (%)：包含ブロック (containing block)（通常は親要素）の幅または高さに対する割合を指定します。異なる画面サイズに適応するレイアウトを作成するのに非常に有用です。
Ems (em)：要素自身のフォントサイズに対する相対的な幅または高さ。テキストサイズに基づいて比率を維持するのに役立ちます。
Rems (rem)：ルート要素（通常は <html>）のフォントサイズに対する相対的な値。em と似ていますが、ルートを基準とするため、ページ全体で一貫したサイズを保ちやすくなります。
ビューポート単位 (vw, vh, vmin, vmax)：ビューポート（ブラウザの表示領域）の幅 (vw) または高さ (vh) に対する割合。
auto (デフォルト)：ブラウザが自動的に幅や高さを計算します。

ブロックレベル要素の width の場合、デフォルトで親コンテナの幅いっぱいに広がります。
height の場合、デフォルトでコンテンツの高さに合わせて自動的に拡張されます。

その他のキーワード：

initial：デフォルト値（通常は auto）に設定します。
inherit：親要素から値を継承します。
max-content / min-content / fit-content：コンテンツ固有のサイズに基づいて調整します（高度な設定用）。

2.1 ピクセル値 (px) の使用

ピクセル値を使用すると、要素のサイズを最も直接的に制御できます。

.box {
  width: 200px;
  height: 100px;
  background-color: lightblue;
}

このコードは、.box 要素のコンテンツ領域を正確に幅200px、高さ100pxに設定します。パディングやボーダーを追加すると、要素全体のサイズは増加します（詳細は後述）。

2.2 パーセンテージ値 (%) の使用

パーセンテージ値は包含ブロック（親要素）を基準とします。

<div class="container">
  <div class="box">これはパーセンテージ指定のボックスです。</div>
</div>

.container {
  width: 500px; /* コンテナの幅を定義 */
  height: 300px; /* コンテナの高さを定義 */
  background-color: lightgray;
}

.box {
  width: 50%;  /* コンテナの幅 (500px) の 50% = 250px */
  height: 50%; /* コンテナの高さ (300px) の 50% = 150px */
  background-color: lightblue;
}

この例では、.box のサイズは幅250px、高さ150pxになります。コンテナのサイズが変われば、.box もそれに応じて調整されます。注意： 子要素のパーセンテージ指定の height は、親要素に明示的な高さが定義されている場合にのみ有効です。

2.3 em と rem 値の使用

em 単位は要素自身のフォントサイズに基づき、rem 単位はルート要素のフォントサイズに基づきます。

<div class="container">
  <div class="box">This is a box with em width and height.</div>
</div>

html {
    font-size: 16px; /* ルートのフォントサイズ */
}

.container {
    font-size: 20px; /* コンテナのフォントサイズ */
}

.box {
  width: 10em;  /* .boxのフォントサイズの10倍 */
  height: 5em;  /* .boxのフォントサイズの5倍 */
  font-size: 14px; /* .box自体のフォントサイズを設定 */
  background-color: lightblue;
}

em を使用する場合、.box の幅は 10 * 14px = 140px、高さは 5 * 14px = 70px になります。

もし残りのCSSをそのままで rem を使用すると次のようになります：

.box {
  width: 10rem;  /* ルート要素のフォントサイズの10倍 */
  height: 5rem;  /* ルート要素のフォントサイズの5倍 */
  font-size: 14px; 
  background-color: lightblue;
}

この場合、.box の幅は 10 * 16px = 160px、高さは 5 * 16px = 80px になります。

2.4 ビューポート単位 (vw, vh) の使用

ビューポート単位はブラウザウィンドウのサイズに基づきます。

.box {
  width: 50vw;  /* ビューポート幅の 50% */
  height: 25vh; /* ビューポート高さの 25% */
}

親要素のサイズに関わらず、.box は常にブラウザウィンドウの幅の半分と高さの4分の1を占めます。

2.5 auto の使用

auto はブラウザにサイズの決定を委ねます。

Width: ブロックレベル要素はデフォルトで親コンテナの幅いっぱいに広がります。
Height: デフォルトでコンテンツに応じて自動調整されます（「コンテンツに押し広げられる」状態）。

.box {
  width: auto;  /* 親要素の幅いっぱいに広がる */
  height: auto; /* コンテンツに合わせて高さを調整 */
  background-color: lightblue;
}

.box 要素にテキストが含まれている場合、その高さはテキストが収まるように自動調整されます。

3. ボックスモデルへの影響（重要！）

width と height がCSSボックスモデルとどのように相互作用するかを常に意識する必要があります。width と height プロパティはコンテンツ領域のサイズのみを設定します。パディング、ボーダー、マージンはこのコンテンツ領域の外側に追加されます。

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  background-color: lightblue;
}

この場合：

コンテンツ領域は幅200px、高さ100pxです。
パディングがすべての辺に20px追加されます。
ボーダーがすべての辺に5px追加されます。

総幅の計算: 200px (コンテンツ) + 20px (左パディング) + 20px (右パディング) + 5px (左ボーダー) + 5px (右ボーダー) = 250px。
総高さの計算: 100px (コンテンツ) + 20px (上パディング) + 20px (下パディング) + 5px (上ボーダー) + 5px (下ボーダー) = 150px。

この挙動は、特定の寸法でレイアウトを作成しようとする際に直感に反することがあります。後の章で詳しく説明する box-sizing プロパティは、この挙動を変更する方法を提供します。

4. コンテンツのオーバーフロー (Overflow)

要素のコンテンツが指定された width や height を超えると、オーバーフローが発生します。

.box {
  width: 100px;
  height: 50px;
  overflow: visible; /* デフォルト値 */
}

overflow プロパティは、溢れたコンテンツを処理するためのいくつかのオプションを提供します。

visible (デフォルト)：溢れたコンテンツはそのまま表示され、ボックスの外側にはみ出します。
hidden：溢れたコンテンツを隠します。
scroll：スクロールバーを追加し、ユーザーがスクロールして内容を確認できるようにします。
auto：scroll と似ていますが、実際に内容が溢れた場合にのみスクロールバーが表示されます。

5. よくある間違いとベストプラクティス

ボックスモデルの忘却: 要素の総サイズを計算する際は、常にパディングとボーダーを加算してください。開発者ツール（デベロッパーツール）を使用して要素のボックスモデルを確認する習慣をつけましょう。
親要素に高さがない状態でのパーセンテージ指定: 親要素に明示的な高さが定義されていない（かつ配置されていない）場合、子要素のパーセンテージ指定の高さは 0 または無効として解決されます。
固定ピクセル値への過度な依存: ピクセル値は精密ですが、柔軟性に欠けます。レスポンシブデザインを実現するために、パーセンテージ、em/rem、またはビューポート単位の使用を検討してください。
オーバーフローの無視: 内容が指定サイズを超えた場合にどうすべきかを常に考慮してください。overflow プロパティを使用して制御しましょう。