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

1. 前提知識

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

1-1. 要素

要素というのは、<タグ>〜</タグ>のカタマリ全体を表します。たとえば、<p>これは例文です<p>は１つの要素です。

1-2. 親要素と子要素

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

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

2. CSSのwidthとheightとは？

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

2-1.書き方

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

<p>これは例文です</p>

p {
  width: 100px;
  height: 100px;
  background: orange;
}

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

2-2. display:inlineだと幅・高さの指定はできない

ウェブデザイン初心者が一度はつまずくところかと思いますが、display: inlineの要素では、widthとheightを指定することができません。

この図のように、幅・高さが指定できるのは要素がdisplay:blockもしくはinline-blockのときです（また、ここにはのっていませんがdisplay:tableのときも指定できます）。display:inlineが初期値であるaタグやspanタグではwidthやheightを指定しても大きさを変えることができないことにご注意ください（ごく一部に例外はありますが）。

くわしくはこちらを読んでみてください。

【CSS】displayの使い方を総まとめ！inlineやblockの違いは？

3. widthの指定方法まとめ

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

3-1. 主なwidthの値

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

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

3-2. width: autoとは？

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

段落タグ（p）やdivタグ、見出しタグなどdisplay: blockの要素の場合、widthの値をとくに指定せずにautoになっていると、要素の幅は基本的に横いっぱいに広がります*。

*：親要素がdisplay: tableやdisplay: flexなどの場合を除きます。

display: inlineやinline-blockのときには、要素の幅＝要素の中身（テキスト）の長さとなります。要素内のテキストが3文字のときより、10文字のときの方が幅が大きくなるわけですね。

ただし、要素の幅が親要素以上に大きくなることはありません。親要素が600pxなら、子要素も自動で600pxになります。

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

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

.parent {
  /*親要素のwidthを100pxに*/
  width: 100px;	
}
p {
  /*初期値でwidthはauto*/
  background:orange;	
}

↑p要素にはwidthを指定していませんが、親要素(div)と同じwidthとなりました。

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

次に要素のwidthをpx（ピクセル数）で指定してみましょう。pxはいわゆる絶対値の値になります。たとえば、width: 500pxと書けば、親要素に関係なく幅は500pxになります。

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

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

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

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

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

親要素の幅＞子要素の幅にする

子要素の幅を、親要素の幅より大きくしてはいけません。なぜならウェブページを見る端末によってはレイアウトが崩れてしまう可能性があるからです。

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

ウェブページを作るときには、親要素の幅＞子要素の幅を常に守るようにしましょう。

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

widthの値を%で指定すると、要素の幅は可変になります。つまり、親要素次第で幅が変わるのです。

% = 親要素の幅に対する比率

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

このように値を◯◯%で指定すると、親要素の幅に対する比率で幅が決まります。親要素自身が％で指定されているときも、これは変わりません。実際に試してみるのが分かりやすいかと思います。オレンジが段落の要素（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%とすると親要素と同じ幅になるということですね。

【中級者向け】width:100%とautoの違いは？

「width: 100%」と「width:auto」の違いは何かと気になりますよね。少し細かい話になりますが、違いは下図のようになります。

autoだとwidthの中にpaddingとborderが含まれるようになります。一方で100%だとwidthにはpaddingとborderの分が含まれません。

つまりwidth:100%の要素にborderかpaddingが指定されていると、その分だけ親要素からはみ出てしまうのです。この問題に対してはいくつかの対処法があります。その中でも一番簡単で分かりやすい対処法はbox-sizing: border-boxというプロパティを指定することです。詳しくは以下の記事で解説していますので目を通してみてください。

【CSS】box-sizing:border-boxの使い方｜効かない時は？

inline-blockの要素だと、width:100%にしないと横いっぱいには広がらない

繰り返しになりますが、display:inline-blockの要素では、未指定の場合の幅＝中身の長さとなります。display:inline-blockにした要素を横いっぱいに広げたい場合には、width:100%を指定する必要があります。

inlineの要素にはそもそも幅指定はできない

こちらも繰り返しになりますが、リンクタグ（a）などdisplay:inlineの要素は、そもそもwidthの指定自体ができないので、100%にしても、横いっぱいには広がりません。リンクタグの幅を指定したい場合には、はじめにdisplay: inline-blockもしくは、display: blockを指定しましょう。

3-5. 親の親の親…までpxで幅が指定されていないとどうなる？

「親要素に対する比率（%）で幅を指定できる」ということが分かりました。勘の良い人がここで疑問に思うのは「親の親の親の親…まで全くpxで指定されていなかったら、%指定の幅はどうやって決まるのか」ということです。つまり「今はさまれているタグの上のタグの上のタグ…全ての要素の生み親“body”(とhtmlタグ)までpxで幅が指定されていないと、比率もクソもないじゃないか」という疑問ですね。

bodyまで一切pxで幅が指定されていないと、ブラウザの幅＝bodyの幅になります。つまり見る端末によって、またブラウザウィンドウの大きさによって、bodyの幅が変わるのです。 その場合width:80%と指定しても、ページを見る人の環境によって要素の絶対値的な大きさが変わるわけですね。

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

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

２つ並んだ要素ならwidth:50%とすれば、二等分になるわけですね。

3つならwidth:33.333%というように指定すれば、3等分できます。

4等分なら25%ですね。このように要素を横並びにするときには、%指定により等分することができるのです。

3-7. min-widthとmax-width

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

【CSS】max-widthとmin-widthの使い方まとめ

4. heightの指定方法まとめ

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

5-1. height: autoとは？

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

基本的に横いっぱいに広がるwidth: autoと異なり、height: autoは縦いっぱいには広がりません。文字や画像などの要素の中身の分だけの高さになります。

要素内の文字や画像だけではありません。中に子要素が入れば、その分だけ高さは大きくなります。

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

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

#test {
  background: orange;
  /*height: autoは初期値*/
}

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

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

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

height: 250pxの場合

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

#test {
  background: orange;
  height:250px;
}

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

height: 50pxの場合

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

#test {
  background: orange;
  height:50px;
}

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

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

ウェブサイトを作ってみると分かりますが、高さを％で指定することはほとんどありません。また、高さを%で指定するのは少々厄介です。初心者の方は参考程度に読み流せばOKかと思います。

heightの%指定では親要素のheightに対する比率になります。たとえば親要素の高さが500pxのときにheight:50%とすると高さは250pxになります。

親要素のheightが指定されていないと%指定は効かない

しかし、親要素のheightが指定されずautoになっている場合には、%指定をしても効きません。なぜでしょうか。

それはさきほど説明した通り「親要素の高さ」＝「中身の高さ」だからです。子要素のheightが50%になれば、親要素のheightも小さくなります。しかしこの50%は親要素に対する値なので、一体何に対して50%なのかわからなくなりますよね。

すこし話が分かりづらいのですが、なんにせよ親要素のheightが指定されていないと、%指定はできないとおぼえておきましょう。

heightを%で指定する例

例として親要素のheightが①指定されている場合と②されていない場合の両パターンでheightを%指定してみましょう。

<p>↓①親のheightが未指定</p>
<div id="test1">
  <p>要素</p>
</div>

<p>↓②親のheightが指定</p>
<div id="test2">
  <p>要素</p>
</div>

#test1 {
  background: gray;
}
#test2 {
  background: gray;
  height: 100px;
}
p {
  height: 50%; 
  background: orange;
}

↑親要素のheightを指定いない方は50%の指定がきかず、親要素と同じ高さになってしまいました（覆いかぶさってしまっています）。一方で親のheightを100pxに指定した方は、きちんと50%の指定が適用されています。このように親要素のheightが指定されている場合に限り、heightの%を指定することができます。

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

たとえばブラウザの画面の半分の高さにしたいというときは、全てのhtmlとbodyタグに対してheight:100%と指定したうえでbodyの直下の要素をheight:50%に指定します。

このようなイメージですね。html,body,親要素をそれぞれブラウザいっぱいの高さにしておいてからheightを%指定するという流れです。

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

<body>
 <div id="headline"><!--この要素を画面の半分に-->
  <p>これは例文です。</p>
 </div>
</body>

html, body {
  height: 100%;
}
#headline {
  height:50%; 
  background: orange;
}

↑要素の高さが画面の半分の高さになりました。ブラウザの高さを変えても、半分の高さに自動で調整されます。

まとめ

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