CSSのwidth（幅）とheight（高さ）の指定方法をマスターしよう

今回はCSSのwidth（幅）とheight（高さ）のさまざまな指定方法についてイチから解説していきます。ウェブデザイン初心者の方でも分かるように、丁寧に説明していくので、必要に応じて読み飛ばして頂ければと思います。

1. 前提知識

widthとheightの説明の前に、以下の２つの用語の意味を理解しておきましょう（解説中に連発します）。

1-1. 要素

要素はHTMLの開始タグ・内容・終了タグをひとまとめにしたものです。たとえば<p>これは例文です</p>は1つの要素です。終了タグのない要素もあります。

1-2. 親要素と子要素

要素Aの中に要素Bが入っているとき「Bの親要素＝A」です。見方を変えると「Aの子要素=B」です。

この図のようなタグの場合『pの親要素はdiv』『divの子要素はp』ですね。

2. CSSのwidthとheightとは？

widthは『要素の横幅』を決めるもので、heightは『要素の高さ』を決めるものです。

2-1.書き方

widthとheightの指定の仕方の一例を紹介します（見やすいように要素をオレンジ色にしました）。

<p class="sizing-example">これは例文です</p>

.sizing-example {
  width: 100px;
  height: 100px;
  background: orange;
}

↑widthとheightの値をそれぞれ100pxに指定しました。すると、要素の幅と高さがそれぞれ100pxになりました。

2-2. 通常のinlineテキストでは幅・高さを指定できない

通常のdisplay: inlineの非置換要素では、widthやheightを指定してもその寸法にはなりません。画像などの置換要素は例外です。

この図は当時の一般的なテキスト要素の説明です。blockやinline-blockでは幅と高さを指定でき、inlineのテキスト要素では通常できません。imgなどの置換要素には指定できます。レイアウト方式によって寸法の決まり方も変わります。

3. widthの指定方法まとめ

heightは一旦置いておき、よく使うwidthから見ていきましょう。

3-1. 主なwidthの値

はじめに覚えておきたいwidthの値を3つ紹介します。

ひとつずつ順番に見ていきましょう。

3-2. width: autoとは？

widthプロパティの初期値はauto（自動）で、CSSで指定しない限り、要素の幅は自動で決められることになります。自動で決まるといっても、決まり方は基本的に以下のようになります。

この図のような通常フローのブロック要素では、width: autoは利用可能な横幅を埋めるように決まります。親の内容領域や余白などが影響し、すべてのレイアウトで単純に「横いっぱい」になるわけではありません。

*：FlexboxやGrid、表組みなどでは別の配置規則が働きます。古い図は通常フローのブロック要素を想定しています。

inline-blockのwidth: autoは内容と利用可能な幅に応じて決まります。通常のテキストのinlineには幅を指定できませんが、長い文字列は折り返しの条件次第ではみ出すことがあります。

通常フローのブロック要素でwidth: autoなら、利用可能な幅に合わせるのが基本です。ただし長い単語・画像・最小幅などで親からはみ出すこともあります。この図は単純な例を示しています。

実際に試してみましょう。

<div class="parent">
  <p>これは要素です。</p>
</div>

.parent {
  /*親要素のwidthを100pxに*/
  width: 100px;
}

.parent p {
  /*初期値でwidthはauto*/
  background: orange;
}

↑この通常フローの例では、pのwidth: autoが親divの利用可能な幅に収まります。

3-3. 幅をpxで指定する

次にwidthをpxで指定します。CSSのpxは固定長の単位ですが、画面の物理的な1画素と常に同じではありません。width: 500pxでも、親の幅を超えれば横にはみ出すことがあります。

画像の幅をpxで指定してみよう

画像の幅をwidth:◯◯pxで指定することもできます。試しにやってみましょう。

HTMLコード

<p class="example">
  <img src="https://saruwakakun.com/wp-content/uploads/2016/11/IMG_9164.jpeg" alt="サルワカくんの顔"/>
</p>

CSSコード

.example img {
  /*画像の幅を50px*/
  width: 50px;
}

.example img {
  height: auto;
}

ブラウザ表示

このようにpxを使って画像の幅を調整することができます。ちなみに画像の高さも初期値はheight: autoで、widthを小さくすると縦横比を保つように合わせて自動調整されます。

意図しない横はみ出しを防ぐ

子要素を親より広くすると、狭い画面では意図しない横スクロールが起きることがあります。この図は固定幅がはみ出す旧例です。必要に応じてmax-width: 100%などで収めましょう。

みなさんも一部の要素だけがびよんとはみ出てしまっているウェブページを見たことがあるかもしれません。これは、親要素より子要素の幅が大きくなってしまっているんですね。

横にはみ出させる意図がない配置では、親の利用可能な幅に収めましょう。スクロールさせるデザインなら、その範囲と操作方法を明確にします。

3-4. 幅を%で指定する

widthを%で指定すると、通常は包含ブロックの幅を基準に可変の幅を決めます。単純な入れ子では親要素の内容領域が基準になるため、次の図のように考えられます。

% = 包含ブロックの幅に対する比率

たとえばwidth:50%の場合を考えてみます。このとき親要素が800pxなら、要素の幅はその50%の400pxになります。

この入れ子の例では、各要素のwidthは親が作る包含ブロックの幅を基準にします。オレンジがp、黄色が親、灰色がさらに外側の要素です。レイアウト方式によって基準や使える幅は変わります。

<div class="grandpa"><!--親のさらに親-->
  <div class="parent"><!--親-->
    <p>これは要素です</p>
  </div>
</div>

.grandpa {
  width: 200px;
  background: silver;
}

.parent {
  /*200pxの半分で100pxに*/
  width: 50%;
  background: yellow;
}

.parent p {
  width: 50%;
  background: orange;
}

↑3つのタグが入れ子になっています。1番上の要素（親の親）は幅200px、次の親はその50%で100px、その中のp要素はさらに50%で50pxというような形になります。このように幅は子要素へいくほどどんどん小さくなるわけですね。

この図は余白や枠線のない単純な例です。width: 100%は包含ブロックの幅を参照しますが、box-sizing: content-boxでpaddingやborderを足すと、外側の幅はそれより大きくなります。

3-5. px指定がなくても幅の%はどう決まる？

ここまでの入れ子では外側の幅をpxで指定しました。では、どの祖先にもpx指定がない場合、width: 80%は何を基準に計算するのでしょうか。通常のページでbodyまで幅が自動の場合を考えます。

通常のページでは最初の包含ブロックがビューポートを基準に作られ、bodyのwidth: autoも余白などを考慮して決まります。この図の「ブラウザ幅＝body幅」は単純化した当時の説明です。画面やウィンドウ幅が変われば利用可能な幅も変わります。

3-6. 横並びの要素の幅を%指定で均等に

横に並んでいる要素を均等の幅に分けたいというときにも、widthの%指定が便利です。

この図は横並びの要素に余白や枠線がない前提です。その条件なら2列をwidth: 50%ずつにできます。padding・border・gapがあればそれらも含めて計算します。

3列なら余白のない単純な例でwidth: 33.333%ずつです。現在はgrid-template-columns: repeat(3, 1fr)などを使うと、列間のgapも含めて均等に配置しやすくなります。旧図は割合だけで並べた例です。

4列で余白がなければ各25%が目安です。実際の横並びではpadding・border・gapや折り返しを考慮し、狭い画面でも収まるようにしましょう。

3-7. min-widthとmax-width

ここまでwidthについて説明してきましたが、widthに似たプロパティに『min-width』と『max-width』があります。これはwidthに対して「◯◯pxよりも小さくしない！」や「◯◯pxより大きくしない！」という制限をかけられるとても便利なものです。一言で言えば、最小幅と最大幅ですね。この２つの知識はスマホ、PC、タブレットなど様々な大きさに対応する「レスポンシブWebデザイン」を作るときに必要になるので一度目を通しておくと良いでしょう。

4. heightの指定方法まとめ

次はheightプロパティ（高さ）の解説をしていきます。heightもwidthと同じ単位の値を取り、初期値はautoになります。ただ、各値の決まり方が少しずつ異なるので1つずつ見ていきましょう。

4-1. height: autoとは？

とくにCSSで指定しない限り、要素のheightの値はautoとなり、高さが自動で決まります。

この通常フローのブロック要素では、height: autoが内容に応じて決まります。画像や文字が増えれば高さも変わります。Flexbox・Gridなどでは別の規則も働きます。

この図のように通常フローにある子要素の内容も親の自動の高さに影響します。絶対配置された子などは通常フローから外れるため、同じ数え方にはなりません。

実際に試してみましょう。要素の中にpとimgの子要素を入れます。どこまでが高さなのか分かりやすくするために要素に色をつけてみます。

HTMLコード

<div class="height-example">
  <p>子要素です。</p>
  <p><img src="https://saruwakakun.com/wp-content/uploads/2016/11/IMG_9164.jpeg" alt="サルワカくんの顔（通常）"/></p>
</div>

CSSコード

.height-example {
  background: orange;
  /*height: autoは初期値*/
}

.height-example img {
  width: 80px;
  height: auto;
}

ブラウザ表示

↑オレンジ色に塗られた部分が要素です。横いっぱいに広がるwidth: autoに対して、height: autoは要素分だけの高さになっていることが分かりますね。 参考：要素にpaddingが指定されれば、その分だけ+αで高くなります。

4-2. 高さをpxで指定する

今度はheightをpx単位で指定してみましょう。実際に例を見るのが分かりやすいかと思います。さきほどの例と同じコードで、要素の高さを小さくしたり、大きくしたりしてみましょう。

height: 250pxの場合

HTMLコード

<div class="height-example">
  <p>子要素です。</p>
  <p><img src="https://saruwakakun.com/wp-content/uploads/2016/11/IMG_9164.jpeg" alt="サルワカくんの顔（通常）"/></p>
</div>

CSSコード

.height-example {
  background: orange;
  height: 250px;
}

.height-example img {
  width: 80px;
  height: auto;
}

ブラウザ表示

↑要素の下側に余裕ができました。

height: 50pxの場合

HTMLコード

<div class="height-example">
  <p>子要素です。</p>
  <p><img src="https://saruwakakun.com/wp-content/uploads/2016/11/IMG_9164.jpeg" alt="サルワカくんの顔（通常）"/></p>
</div>

CSSコード

.height-example {
  background: orange;
  height: 50px;
}

.height-example img {
  width: 80px;
  height: auto;
}

ブラウザ表示

↑要素の高さの値が中身の高さ分よりも小さくなったため、子要素がはみ出てしまいました。heightをpxで指定するときは、中身がうっかりはみ出てしまわないように慎重に値を決めましょう。

4-3. 高さを％で指定する

高さを%で指定する方法は、親の高さとの比率を保ちたい場合に役立ちます。ただし幅の%指定より基準が決まりにくい場合があるので、次の例で条件を確認しましょう。

height: 50%は包含ブロックの高さを基準に計算します。次の図では親の高さが500pxと確定しているので、子の高さは250pxです。

親の高さが内容に応じる場合

通常フローのブロックで親の高さが内容任せのautoなら、子のheight: 50%は数値として解決できず、autoとして扱われることがあります。次の例で比べます。

親の高さが子の内容で決まるとき、その子の高さを親の50%として求めると基準が確定しません。図はこの通常フローの関係を示す当時の説明です。

基本的な通常フローの例では、親に確定した高さがあるかを確認しましょう。Flexbox・Gridや絶対配置などには別の計算規則があるため、「親にheight指定がなければ必ず効かない」とは限りません。

heightを%で指定する例

例として、①親要素のheightを指定しない場合と②100pxに指定する場合の両パターンで、子要素のheightを%指定してみましょう。

<p>↓①親のheightが未指定</p>
<div class="height-parent-one">
  <p>要素</p>
</div>

<p>↓②親のheightが指定</p>
<div class="height-parent-two">
  <p>要素</p>
</div>

.height-parent-one {
  background: gray;
}

.height-parent-two {
  background: gray;
  height: 100px;
}

.height-parent-one > p,
.height-parent-two > p {
  height: 50%;
  margin: 0;
  background: orange;
}

↑この通常フローの見本では、①の親は高さが内容任せなので子の50%を解決できず、②の高さ100pxの親では子が50pxになります。両方の結果を動く見本で比べてください。

4-4. 画面の半分の高さにしたいときは？

画面の高さの半分にしたいなら、現在はheight: 50dvhなどのビューポート単位を使えます。従来のhtml, body { height: 100% }と子のheight: 50%も、包含ブロックの高さを確定させる例として下の旧画像に残します。

旧図はhtml・bodyの高さを100%にしてから子へ50%を指定する当時の例です。次のコピー用コードと動く見本は、より直接的な50dvhに更新しました。

実際にコードも書いてみましょう。

HTMLコード

<div class="viewport-half">
  <p>これは例文です。</p>
</div>

CSSコード

.viewport-half {
  height: 50dvh;
  background: orange;
}

ブラウザ表示

↑埋め込み見本では固定高さ300pxのiframeの表示領域を基準に、50dvhが半分の高さになります。このコードを独立したページで使うと、そのページのビューポートが基準になり、画面高に応じて変わります。旧画像はhtml・bodyの高さを経由した結果です。

まとめ

widthとheightの基本的な使い方を解説してきました。最後にこの記事のまとめを書いておきます。