実行できるCSSドキュメント: width と height

Q: height: 100% が効かないのはなぜですか？

パーセントの高さは親の高さに対するパーセントで、その高さが確定しているときだけ効きます。親の高さが auto (内容に合わせたサイズ) だと、パーセントは auto として扱われます。親に高さを指定するか、パーセントなしで子を引き伸ばす flexbox や grid を使いましょう。

Q: width: 100% と width: auto の違いは何ですか？

ブロック要素では、auto は padding と border を含めてコンテナを埋めます。width: 100% は内容の幅をコンテナの幅にするので、初期値の box-sizing: content-box では padding や border の分だけ要素がはみ出します。

Q: CSS の min-height は何をしますか？

要素の最小の高さを指定しつつ、内容に合わせて伸びることを許します。min-height: 200px なら空のカードは 200px になり、テキストの多いカードははみ出さずに高くなります。固定の height ではこうはなりません。

Q: width と max-width の違いは何ですか？

width は正確なサイズを指定します。max-width は上限を指定します。要素はスマートフォンなどではそれより狭くなれますが、それより広くはなりません。width: 100%; max-width: 600px; なら小さな画面では幅いっぱいに広がり、大きな画面では 600px で止まります。

Q: 要素を画面いっぱいの高さにするには？

min-height: 100vh を使います (モバイルブラウザのツールバーも考慮するなら 100dvh)。height ではなく min-height にすると、内容が画面より高いときにセクションが伸びられます。

width と height の指定

width と height は要素の内容ボックスのサイズを指定します。初期状態では、padding と border はそのサイズの外側に加わります。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Width and height</title>
  <style>
    .box {
      width: 240px;
      height: 80px;
      background: #2563eb;
      color: white;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="box" id="box"></div>
  <script>
    const box = document.getElementById('box');
    box.textContent = 'width 240px + padding = ' + box.offsetWidth + ' x ' + box.offsetHeight + 'px';
  </script>
</body>
</html>

ボックスは 260 × 100 ピクセルです。内容の 240 × 80 に、各辺 10px の padding が加わっています。box-sizing: border-box ならちょうど 240 × 80 になります。両方の説明はボックスモデルのページにあります。

値

値	例	意味
`auto`	`width: auto`	初期値。ブロックはコンテナの幅を埋め、高さは内容に合わせる
長さ	`300px`, `20rem`	固定サイズ
パーセント	`50%`	包含ブロックの幅 (`width` の場合) または高さ (`height` の場合) が基準
ビューポート単位	`100vh`, `50vw`, `100dvh`	ブラウザのウィンドウが基準
`min-content`	`width: min-content`	できるだけ狭く。いちばん長い単語で決まる
`max-content`	`width: max-content`	内容を 1 行に収めた幅
`fit-content`	`width: fit-content`	`max-content` と同様だが、コンテナより広くはならない

height: 100% が効かない理由

パーセントの height には、基準となる確定した高さを持つ親が必要です。親の高さが auto のとき (これが普通です)、子の height: 100% も auto として動きます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>height 100%</title>
  <style>
    .parent { background: #e5e7eb; padding: 6px; margin-bottom: 12px; display: flow-root; }
    .fixed { height: 120px; }
    .child { height: 100%; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">Parent height auto: 100% is ignored</div>
  </div>
  <div class="parent fixed">
    <div class="child">Parent height 120px: 100% works</div>
  </div>
</body>
</html>

1 つ目の子はテキストの高さしかありません。2 つ目は親に高さがあるので、親いっぱいに広がります。ページ全体をパーセントでつなぐには、html と body までのすべての祖先に高さが必要です。そのため、ほとんどのレイアウトでは代わりに flexbox や grid を使います。これらの子要素はパーセントなしで引き伸ばされます。

min-height と max-width: 融通の利くサイズ

固定サイズは壊れやすいものです。固定の高さはテキストが想定より長いとはみ出し、固定の幅はスマートフォンには広すぎます。min- と max- のプロパティは、正確なサイズではなく限界を指定します。

プロパティ	意味
`min-width`	これより狭くならない
`max-width`	これより広くならない
`min-height`	これより低くならないが、伸びることはできる
`max-height`	これより高くならない (はみ出した内容はあふれる)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>min and max</title>
  <style>
    .card {
      max-width: 360px;   /* narrower on small screens, never wider */
      min-height: 50px;   /* at least 50px, grows with content */
      border: 2px solid #2563eb;
      padding: 10px;
      margin-bottom: 12px;
    }
    .fixed {
      max-width: 360px;
      height: 50px;       /* fixed: long text spills out */
      border: 2px solid #f59e0b;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="card">Short card: the 50px minimum.</div>
  <div class="card">A card with much more text. It keeps its 360px limit but grows taller, because min-height sets a floor, not a fixed size. The border stays around all of the text, however many lines there are. Add another sentence here and the card simply gets taller again.</div>
  <div class="fixed">A fixed height of 50px with long text. The text no longer fits, so it spills past the amber border and over whatever comes next on the page. A fixed height cannot know how long the text will be, or how large the reader has set the font.</div>
</body>
</html>

スマートフォンなど 360px より狭い画面では、カードも一緒に縮みます。max-width は上限にすぎないからです。

サイズと限界の両方があるときは、限界が勝ちます。max-width は width に勝ち、min-width は max-width に勝ちます。

width: auto と width: 100%

ブロック要素では、width を auto のままにしておくのがほぼ常に正解です。auto は padding と border を含めたボックス全体をコンテナに収めます。100% は内容をコンテナと同じ幅にし、その上に padding と border を加えます:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>auto vs 100%</title>
  <style>
    .container { width: 300px; background: #e5e7eb; padding: 8px 0; }
    .item { padding: 10px; border: 3px solid #2563eb; margin: 6px 0; }
    .auto { width: auto; }
    .full { width: 100%; }
  </style>
</head>
<body>
  <div class="container">
    <div class="item auto">width: auto, fits</div>
    <div class="item full">width: 100%, overflows</div>
  </div>
  <p id="out"></p>
  <script>
    const w = (s) => document.querySelector(s).offsetWidth;
    document.getElementById('out').textContent =
      'container 300px, auto ' + w('.auto') + 'px, 100% ' + w('.full') + 'px';
  </script>
</body>
</html>

width: 100% は、初期状態ではブロックでない要素 (<input>、<img>、inline-block) には今でも便利です。できれば box-sizing: border-box と組み合わせましょう。

内容に合わせたサイズ: fit-content

inline-block に変えずに、ブロックをテキストの幅だけにするには fit-content を使います:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fit-content</title>
  <style>
    div { background: #16a34a; color: white; padding: 6px 10px; margin-bottom: 8px; }
    .fit { width: fit-content; }
    .min { width: min-content; }
  </style>
</head>
<body>
  <div>auto: full width</div>
  <div class="fit">fit-content: as wide as the text</div>
  <div class="min">min-content: one word per line</div>
</body>
</html>

fit-content と margin-inline: auto を組み合わせると、テキストの幅ちょうどのラベルやボタン風のブロックを中央に寄せられます。

画面いっぱいの高さのセクションとビューポート単位

vh はビューポートの高さの 1%、vw は幅の 1% です。スマートフォンではスクロールに合わせてブラウザのアドレスバーが伸び縮みするので、100vh が見えている領域より高くなることがあります。動的な単位 dvh は見えている領域に追従し、svh は見える高さの最小値を使います:

.hero {
  min-height: 100vh;  /* fallback */
  min-height: 100dvh; /* follows mobile toolbars */
}

画面いっぱいのセクションには height ではなく min-height を使いましょう。小さな画面でテキストが多くても、セクションが伸びてくれます。収まらない内容を持つ固定の高さは内容があふれます。その扱いは CSS overflow のページで解説しています。

よくある間違い

高さのない親の中で height: 100%。 auto として動きます。親に高さを指定するか、flex か grid を使いましょう。
width: 100% と padding を併用する。 要素がコンテナからはみ出します。ブロックの幅は auto のままにするか、box-sizing: border-box を使いましょう。
テキストを入れる要素に固定の高さ。 長いテキストや大きなフォントでもあふれないよう、min-height を使いましょう。
インライン要素に width。 <span> や <a> は width と height を無視します。inline-block か block にしましょう。
ページ全体の囲みに width: 1200px。 どのスマートフォンでも横スクロールが出ます。代わりに max-width: 1200px を使いましょう。

よくある質問

height: 100% が効かないのはなぜですか？

パーセントの高さは親の高さに対するパーセントで、その高さが確定しているときだけ効きます。親の高さが auto (内容に合わせたサイズ) だと、パーセントは auto として扱われます。親に高さを指定するか、パーセントなしで子を引き伸ばす flexbox や grid を使いましょう。

width: 100% と width: auto の違いは何ですか？

ブロック要素では、auto は padding と border を含めてコンテナを埋めます。width: 100% は内容の幅をコンテナの幅にするので、初期値の box-sizing: content-box では padding や border の分だけ要素がはみ出します。

CSS の min-height は何をしますか？

要素の最小の高さを指定しつつ、内容に合わせて伸びることを許します。min-height: 200px なら空のカードは 200px になり、テキストの多いカードははみ出さずに高くなります。固定の height ではこうはなりません。

width と max-width の違いは何ですか？

width は正確なサイズを指定します。max-width は上限を指定します。要素はスマートフォンなどではそれより狭くなれますが、それより広くはなりません。width: 100%; max-width: 600px; なら小さな画面では幅いっぱいに広がり、大きな画面では 600px で止まります。

要素を画面いっぱいの高さにするには？

min-height: 100vh を使います (モバイルブラウザのツールバーも考慮するなら 100dvh)。height ではなく min-height にすると、内容が画面より高いときにセクションが伸びられます。