CSSで幅と高さを指定する方法｜width・height・max-width・min-heightを初心者向けに解説

CSSを書いていると、「箱を320pxにしたのに想定より大きい」「height: 100%;が効かない」「画像が親要素からはみ出す」といった問題に出会います。こうした幅と高さを調整する基本プロパティが、width・height・max-width・min-heightです。

4つはすべてサイズに関係しますが、役割は同じではありません。widthとheightは基準となる大きさ、max-widthは幅の上限、min-heightは高さの下限を設定します。

この記事では、HTMLの要素にCSSを指定する基本が分かる方に向けて、4つの違いをコードと図で比べます。後半では2つのファイルを保存し、画面幅と文章量に対応するカードを作ります。指定が効かなくても、症状別の確認方法から原因を絞れます。CSSの宣言の形がまだ曖昧な場合は、先にCSSの基本的な書き方を確認すると進めやすくなります。

CSSのwidth・height・max-width・min-heightとは

CSSのサイズ指定では、まず「基準の大きさを決めるのか」「大きくなりすぎないようにするのか」「小さくなりすぎないようにするのか」を分けて考えます。

4つのプロパティが決めること

基本の書き方は、セレクターの宣言ブロック内にプロパティと値を記述する形です。次のコードは、.boxの幅を320px、高さを160pxにします。

.box {
  width: 320px;
  height: 160px;
}

この例のコードはstyle.cssなどのCSSファイルへ書く内容です。HTMLの<style>要素内へ書く場合も、宣言部分の書き方は同じです。

widthとheightの初期値はautoで、サイズを指定しないとブラウザーが内容や周囲の条件から決めます。

各プロパティの定義は、MDNのwidth、height、max-width、min-heightの日本語解説でも確認できます。

サイズを指定する前にdisplayを確認する

幅と高さは、すべての要素へ同じように効くわけではありません。たとえば、通常のspanやaは、ブラウザーの初期スタイルでインライン表示になります。

.label {
  width: 200px;
  height: 80px;
}

通常のspanやaなどのインライン要素には、widthとheightが指定どおりには反映されません。

ここで説明しているのは、spanやaなどの文字要素です。imgなどの画像要素は、インライン表示でも幅と高さを持てます。横並びのまま箱の大きさを整えるならdisplay: inline-block;、前後で改行する箱にするならdisplay: block;を検討します。詳しい違いは、CSSのdisplayとblock・inline・inline-blockで解説しています。

ここで、width: 320px;に左右24pxの余白と4pxの枠線を付けた箱を比べます。box-sizingは、指定した幅に余白と枠線を含めるかどうかを決めるプロパティです。

図のように、表示される箱の大きさはdisplayだけでなく、padding・border・box-sizingにも左右されます。

widthで要素の幅を指定する

widthは、要素の基準となる幅を指定するプロパティです。固定した幅にはpx、親要素に合わせて変わる幅には%がよく使われます。

pxで一定の幅を指定する

次の例では、カードの幅を320pxにします。

.card {
  width: 320px;
}

pxは具体的な表示幅をそろえたい小さな部品に向いています。ただし、スマートフォンの表示領域より大きな固定幅を指定すると、横にはみ出す原因になります。

幅を320pxにするなら320pxのように単位が必要です。値が0のときだけは、0pxではなく0と書けます。

%で親要素に対する割合を指定する

次の例では、子要素の幅を親要素の50%にします。

.parent {
  width: 800px;
}

.child {
  width: 50%;
}

この場合、.childの基準となる幅は400pxです。親要素が600pxになれば、子要素の基準幅は300pxへ変わります。

width: 100%;は画面全体ではなく、通常は親要素の利用可能な幅を基準にします。

widthの%は、「幅を計算するときの基準になる箱」に対する割合です。多くの場合は親要素ですが、レイアウトによっては別の箱が基準になります。この基準になる箱をCSSでは「包含ブロック」と呼びます。想定と違う場合は、デベロッパーツールで基準になる箱の幅を確認してください。

単位の違いを整理したい場合は、CSSのpx・%・em・remの使い分けもあわせて確認できます。

heightで要素の高さを指定する

heightは、要素の基準となる高さを指定します。画像や装飾用の箱では便利ですが、文章が入る箱へ固定値を使うときは、内容の増減も考える必要があります。

pxで一定の高さを指定する

次の例では、ボックスの高さを160pxにします。

.box {
  height: 160px;
}

内容が160px以内なら箱に収まります。しかし、文章の追加や文字サイズの拡大によって必要な高さが増えると、内容が箱の外へはみ出すことがあります。

.box {
  height: 160px;
  overflow: auto;
}

overflow: auto;を加えると、内容が収まらないときにスクロール領域を作れます。ただし、カード本文を毎回スクロールさせる設計が読みやすいとは限りません。

%の高さには親要素の高さが必要になる

幅のパーセント指定に比べ、通常配置の高さのパーセント指定は条件が分かりにくい点に注意してください。

.parent {
  height: 400px;
}

.child {
  height: 50%;
}

親要素の高さが400pxと明示されているため、子要素の基準高さは200pxになります。

.parent {
  /* heightを指定していない */
}

.child {
  height: 50%;
}

親要素の高さが確定していないと、子要素は「何の50%か」を計算できません。そのため、height: 50%を指定しても、通常はautoと同じように内容に合わせた高さになります。

「50%なのに半分にならない」ときは、親の高さがheight: 400px;などで確定しているか確認します。検証ツールに表示された結果の高さが400pxでも、内容から決まった高さなら同じ条件ではありません。ここでは通常のブロック配置を扱っており、FlexboxやGridでは高さが確定する条件が異なる場合があります。

max-widthで幅の上限を決める

max-widthは、要素が広がれる最大幅を指定します。画面が狭いときは縮み、画面が広くても指定した上限を超えないレイアウトを作れます。

レスポンシブなコンテナーを作る

コンテナーは、文章や画像をまとめて入れる箱です。次の指定では、狭い画面では親幅に収まり、広い画面では640pxを上限にして、画面幅に合わせて伸び縮みします。

.container {
  box-sizing: border-box;
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
}

max-widthは「この幅より大きくしない」という上限です。

width: 100%;で利用可能な幅を使い、max-width: 640px;で広がりすぎるのを防ぎます。box-sizing: border-box;は余白と枠線を指定幅に含める設定、margin-inline: auto;は左右の余白を自動にして中央へ配置する設定です。

親要素が640pxより狭ければ要素も狭くなり、640pxより広ければ要素の幅は640pxで止まります。widthとmax-widthは競合する指定ではなく、基準幅と上限として組み合わせられます。

画像を親要素の幅に収める

画像が記事幅からはみ出すときは、次の指定が基本です。

img {
  width: auto;
  max-width: 100%;
  height: auto;
}

画像の元の幅を保ちながら親幅に収めるには、width: auto;・max-width: 100%;・height: auto;を組み合わせます。

通常の画像では、width: auto;で元の幅を使い、親幅を超える場合だけmax-widthで縮めます。max-widthだけでは、別のルールにあるwidth: 100%;などによる拡大を防げません。テーマのCSSがある場合は、画像に実際に適用されている幅も確認してください。

/* 親幅まで広げる画像に付けるクラス */
.fill-image {
  width: 100%;
  height: auto;
}

/* 元の幅より大きくしない画像に付けるクラス */
.fit-image {
  width: auto;
  max-width: 100%;
  height: auto;
}

画像のmax-widthについては、MDNのCSSにおけるアイテムのサイズ設定でも、width: 100%;との違いが例示されています。

min-heightで最低限の高さを確保する

min-heightは、要素の高さの下限を設定します。通常の文章の箱でheight: auto;と組み合わせると、内容が少ないときは下限を保ち、多いときは内容に合わせて伸びます。

heightとの違い

固定したheightとmin-heightの違いを、同じ160pxで比べます。

.fixed-card {
  height: 160px;
}

.flexible-card {
  height: auto;
  min-height: 160px;
}

たとえばheight: 100px;とmin-height: 160px;を同時に指定すると、高さは160pxになります。ただし、内容がさらに増えても、固定したheightを残したままでは自動で収まりません。

min-heightを足すだけでは、固定高さによるはみ出しは解決しません。内容に合わせて伸ばす箱ではheight: auto;も確認します。

図の下側はheight: auto;で、上限となるmax-heightも指定していない例です。高さの下限を超える文章が入ると、その分だけ箱が伸びます。

カードの最低高を整える

カード本文の長さに差があるときは、最低限の高さだけをそろえると扱いやすくなります。

.card {
  box-sizing: border-box;
  height: auto;
  min-height: 180px;
  padding: 24px;
}

この例では、上下の余白を含めて180pxを下限にします。文章が収まらなければ180pxを超えて伸びます。box-sizing: border-box;がない初期設定では、180pxの外側に上下48pxの余白が加わる点に注意してください。

4つのプロパティの違いと使い分け

4つのプロパティは、目的から逆算して選ぶと迷いにくくなります。

目的から使うプロパティを選ぶ

横幅にはwidthとmax-widthを組み合わせられます。縦方向は内容に任せ、最低限の高さが必要な場合だけmin-heightを加えましょう。次の例では、本文領域に240pxの最低高が必要だと仮定しています。

.content {
  box-sizing: border-box;
  height: auto;
  width: 100%;
  max-width: 720px;
  min-height: 240px;
}

box-sizingでwidth・heightに含める範囲を変える

初期設定のbox-sizing: content-box;では、widthとheightは内容部分の大きさを示します。paddingとborderは、その外側へ加わります。

.box {
  width: 320px;
  padding: 24px;
  border: 4px solid #7a8e6d;
}

左右のpaddingが48px、左右のborderが8px加わるため、横方向の外寸は376pxになります。

初期設定のcontent-boxでは、指定したwidthの外側へpaddingとborderが加わります。

外寸を320pxに収めたい場合は、border-boxを使います。

.box {
  box-sizing: border-box;
  width: 320px;
  padding: 24px;
  border: 4px solid #7a8e6d;
}

この指定では、320pxの中に内容部分・左右のpadding・左右のborderが含まれます。box-sizingは、サイズの数値そのものではなく、その数値で測る箱の範囲を変えます。

詳しい計算方法は、CSSのボックスモデルとcontent・padding・border・marginで確認できます。

画面幅と文章量に対応するカードを作る

ここまでの指定を組み合わせて、幅の上限が640px、高さの下限が180pxのカードを作ります。テキストエディターとブラウザーを用意し、次の3ステップで試してください。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>カードのサイズを試す</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <article class="info-card">
    <h1>Web制作を学ぶ</h1>
    <p>HTMLとCSSの基礎から、少しずつ進めます。</p>
  </article>
</body>
</html>

body {
  margin: 0;
  padding: 16px;
  font-family: sans-serif;
  line-height: 1.7;
}

.info-card {
  height: auto;
  box-sizing: border-box;
  width: 100%;
  max-width: 640px;
  min-height: 180px;
  margin-inline: auto;
  padding: 24px;
  background-color: #f5f6f2;
  border: 2px solid #7a8e6d;
  border-radius: 16px;
}

.info-card h1 {
  margin-top: 0;
  font-size: 24px;
}

.info-card p {
  margin-bottom: 0;
}

この例のheight: auto;は、内容に合わせて伸ばす意図を明示しています。幅だけを変える確認と、文章だけを増やす確認を分けると、どの指定が働いているか見つけやすくなります。

背景色・枠線・角丸の設定は、CSSのbackground-color・border・border-radiusで詳しく解説しています。

指定が反映されないときの症状別の確認方法

まず、以下から近い症状を探してください。高さの%だけが効かない場合は、前の「%の高さには親要素の高さが必要になる」で、親の高さの決まり方を確認します。CSS全体が反映されない場合は、ファイルの保存、再読み込み、class名とセレクターの一致を先に確認しましょう。

width・heightが効かない

通常のspanへ幅と高さを書いても、インライン表示のままでは指定どおりになりません。

.tag {
  display: inline-block;
  width: 160px;
  height: 48px;
}

width・heightが効かないときは、最初に計算後のdisplayがinlineではないか確認します。

imgなどの画像要素はインライン表示でも幅と高さを持てるため、「インラインなら必ず無効」と決めつけず、対象要素も確認してください。

内容が固定した高さからはみ出す

文章が入る箱でheightを固定すると、内容量や文字拡大によってはみ出します。

.message {
  height: auto;
  /* 最低限120pxが必要な場合だけ加える */
  min-height: 120px;
}

高さを固定する理由がなければ、固定したheightを外すかautoへ変更します。別のCSSのmax-heightが上限になっていないかも確認してください。固定が必要な場合だけ、overflow: auto;などで内容へアクセスできるようにします。

width: 100%の要素が親幅を超える

初期設定のcontent-boxでwidth: 100%;にpaddingやborderを加えると、外寸が親幅を超えることがあります。

.form-field {
  box-sizing: border-box;
  width: 100%;
  padding: 12px;
  border: 1px solid #7a8e6d;
}

box-sizing: border-box;を指定すると、paddingとborderを100%の内側へ含められます。ただし、外側の余白であるmarginは含まれません。まだはみ出す場合は、左右のmarginや別のルールのmin-widthも確認してください。

値の書き方が無効になっている

0以外の長さに単位がない、負の値を使う、プロパティに対応しない単語を書く、といった宣言は無効です。

.box {
  width: 320;       /* 単位がないため無効 */
  height: -100px;   /* 負の値は無効 */
  max-width: wide;  /* 対応しない値のため無効 */
}

無効な宣言は、その宣言がブラウザーに採用されません。同じ行にほかの有効な宣言があれば、それまで無効になるわけではありません。別の有効な宣言や初期値が残るため、見た目だけでは原因を判断しにくいことがあります。

• 対象：class名やセレクターが目的の要素と一致しているか
• 書き方：コロン、セミコロン、単位、値が正しいか
• display：通常のインライン要素へ幅・高さを書いていないか
• 基準：%の基準となる箱はどれか。高さは内容任せではなく確定しているか
• 上限・下限：max-widthやmin-heightが最終サイズを変えていないか
• 箱の範囲：box-sizing、padding、borderを含めているか
• 上書き：デベロッパーツールの計算済みスタイルで最終値を確認したか

より詳しい定義は、W3CのCSS Box Sizing Module Level 3で確認できます。仕様書は英語の一次資料なので、最初はMDNの日本語解説で動きをつかみ、必要な定義を仕様書で確かめると読み進めやすいでしょう。

よくある質問

min-widthとmax-widthが矛盾すると、どちらが優先されますか？

同じ要素にmin-width: 500px;とmax-width: 400px;を指定した場合は、下限のmin-widthが優先されます。幅の上限を設定してもはみ出すときは、別のCSSに大きなmin-widthが残っていないか確認してください。

親にmin-heightを指定すれば、子のheight: 100%は使えますか？

通常のブロック配置では、親にmin-heightを指定しただけで、子の%の基準となる高さが確定するわけではありません。親のheightがautoなら、内容から高さが決まる場合があります。最低高の指定と、%の計算基準を分けて考えてください。

同じmin-heightにすれば、複数のカードは同じ高さになりますか？

そろうのは高さの下限です。下限を超える文章が入ったカードは、height: auto;なら個別に伸びます。並べたカードの高さをそろえる目的では、FlexboxやGridの配置も合わせて検討します。

まとめ

CSSのwidth・height・max-width・min-heightを使うと、要素の基準サイズ、上限、下限を分けて調整できます。

• widthは基準となる幅を指定する
• heightは基準となる高さを指定する
• max-widthは幅の上限を設定し、レスポンシブ対応に役立つ
• min-heightは高さの下限。内容に合わせて伸ばすならheight: autoも確認する
• paddingとborderを外寸へ含めるならbox-sizing: border-boxを使う
• 反映されないときは症状からdisplay、親のサイズ、上限・下限、box-sizingを確認する

まずは実践例の2ファイルを保存し、ブラウザー幅と文章量を一つずつ変えて表示を比べてみてください。下限が不要ならmin-heightを外し、短い文章のときの違いも確認できます。

目的別に次の記事を選ぶ

次は、確認したい内容に合わせて記事を選んでください。

幅に余白や枠線を足したときの外寸を整理したい方は、ボックスモデルを確認しましょう。

HOAI Journal

CSSのボックスモデルとは？content・padding・border・marginの仕組み CSSのボックスモデルを初心者向けに解説。content・padding・border・marginの4層、widthの計算、content-boxとborder-box、marginとpaddingの使い分け、開発者ツールでの…

サイズを指定したカードを横に並べ、間隔や配置も調整したい方は、Flexboxへ進みましょう。

HOAI Journal

CSS Flexboxの使い方｜display: flex・justify-content・align-items CSSのFlexboxを初心者向けに解説。display: flexを親要素に指定する方法、justify-contentとalign-itemsの違い、主軸・交差軸、gap・flex-wrap、効かないときの確認順まで…