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

CSSのwidthとheightをマスターしよう

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

1. 前提知識

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

1-1. 要素

タグと要素

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

1-2. 親要素と子要素

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

親要素と子要素

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

2. CSSのwidthとheightとは?

heightとwidthとは?

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

2-1.書き方

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

HTMLコード
<p>これは例文です</p>
CSSコード
p { width: 100px;
	height: 100px;
	background: orange
	}
ブラウザ表示

これは例文です


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

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

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

display:inline-blockの幅と高さの指定

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

3. widthの指定方法まとめ

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

3-1. widthの値の書き方は3種類ある

以下の3パターンの書き方があります。

  1. width: auto ←初期値!
  2. width: ◯◯px
  3. width: ◯◯%

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

3-2. width: autoとは?

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

Autoでの幅の指定のされ方

widthの値をとくに指定せずにautoになっている限り、要素の幅は基本的に横いっぱいに広がります。

親要素以上に自動で大きくなることはない

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

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

HTMLコード
<div class="parent">
  <p>これは要素です。</p>
</div>
CSSコード
.parent{
	width: 100px
	/*↑親要素のwidthを100pxに*/
	}
.p {
	background:orange
	/*初期値でwidthはauto*/
	}
ブラウザ表示

これは要素です。


↑p要素にはwidthを指定していませんが、親要素(div)と同じwidthとなりました。ただし、一部の状況ではautoでも横いっぱいに広がらない場合もあります(要素がposition: absoluteに指定されているときなど)。あくまでも「基本的には横いっぱいに広がる」ものだと思っておきましょう。

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

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

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

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

HTMLコード
<p class="example">
<img src="http://saruwakakun.com/wp-content/uploads/2016/11/IMG_9164.jpeg" alt="サルワカくんの顔"/>
</p>
CSSコード
.example img {
	width: 50px
	/*↑画像の幅を50px*/
	}
ブラウザ表示

サルワカくんの顔


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

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

子要素を親要素の幅より大きくするのはNG

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

グリル ロースト ソテーの違い 意外と知らない焼き方の解説 min

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

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

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

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

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

パーセントは親要素に対する比率

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

このように値を◯◯%で指定すると、親要素の幅に対する比率で幅が決まります。親要素自身が%で指定されているときも、これは変わりません。実際に試してみるのが分かりやすいかと思います。オレンジが段落の要素(p)黄色がその親要素灰色が親要素の親要素になります。

HTMLコード
<div class="grandpa"><!--親のさらに親-->
  <div class="parent"><!--親-->
    <p>これは要素です</p>
  </div>
</div>
CSSコード
.grandpa {width:200px;
	background:silver
	}
.parent {width: 50%
	/*↑200pxの半分で100pxに*/
	background: yellow
	}
.parent p {width: 50%;
	background:orange
	}
ブラウザ表示

これは要素です


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

子要素を100 にすると親要素と同じ幅に

ちなみにwidth: 100%とすると親要素と同じ幅になるということですね。

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

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

autoと100%の違い

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

width100パーセントだお

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

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

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

ブラウザの幅がwidthの値になる

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

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

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

要素を50 に

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

要素の均等配置

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

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

3-7. min-widthとmax-width

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

4. heightの指定方法まとめ

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

  1. height: auto ←初期値!
  2. height: ◯◯px
  3. height: ◯◯%

5-1. height: autoとは?

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

高さをautoで決める

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

中の子要素の分だけ高さが変わる

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

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

HTMLコード
<div id="test">
  <p>子要素です。</p>
  <p><img src="http://saruwakakun.com/wp-content/uploads/2016/11/IMG_9164.jpeg" alt="サルワカくんの顔(通常)"/></p>
</div>
CSSコード
#test {
	background: orange
	/*height: autoは初期値*/
	}
ブラウザ表示

子要素です。

サルワカくんの顔(通常)



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

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

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

height: 250pxの場合

HTMLコード
<div id="test">
  <p>子要素です。</p>
  <p><img src="http://saruwakakun.com/wp-content/uploads/2016/11/IMG_9164.jpeg" alt="サルワカくんの顔(通常)"/></p>
</div>
CSSコード
#test {
	background: orange;
	height:250px
	}
ブラウザ表示

子要素です。

サルワカくんの顔(通常)


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

height: 50pxの場合

HTMLコード
<div id="test">
  <p>子要素です。</p>
  <p><img src="http://saruwakakun.com/wp-content/uploads/2016/11/IMG_9164.jpeg" alt="サルワカくんの顔(通常)"/></p>
</div>
CSSコード
#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を%指定してみましょう。

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

<p>↓②親のheightが指定</p>
<div id="test2">
  <p>要素</p>
</div>
CSSコード
#test1 {
	background: gray
	}
#test2 {
	background: gray;
	height: 100px
	}
p {height: 50%; 
	background: orange
	}
ブラウザ表示

↓①親のheightが未指定

要素


↓②親のheightが指定

要素

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

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

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

heightをブラウザの半分の高さに

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

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

HTMLコード
<body>
 <div id="headline"><!--この要素を画面の半分に-->
  <p>これは例文です。</p>
 </div>
</body>
CSSコード
html, body {
	height: 100%
	}
#headline {
	height:50%; 
	color: orange
	}
ブラウザ表示

CSS練習 15

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

まとめ

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

覚えておきたいポイント
  • display: inlineの要素では幅・高さの指定ができない
  • height・widthが取ることのできる値は①auto ②◯◯px ③◯◯emの3つ
  • 初期値はauto(自動で幅・高さが決まる)
  • width: autoだと基本的に要素は横いっぱいに広がる
  • height: autoだと要素の中身(文や画像、子要素、paddingなど)の分だけの高さに
  • px指定により、固定幅・固定の高さが決められる
  • %指定により、親要素に対する相対的な幅・高さが決められる
  • bodyのwidthは指定されていないと、width=ブラウザの幅となる
サルワカ