【HTML＋CSS初心者講座03】widthとheightで幅・高さを指定

1. 前提知識

widthとheightを学ぶ前に、以下の2つの用語を押さえておきましょう。解説中に何度も出てきます。

1-1. 要素とは？

要素とは、<タグ>〜</タグ> のかたまり全体のことです。

<p>これは例文です</p>  ← これが1つの「要素」

1-2. 親要素と子要素

要素Aの中に要素Bが入っているとき、「Bの親要素＝A」「Aの子要素＝B」 と呼びます。

<div>           <!-- 親要素 -->
  <p>テキスト</p>  <!-- 子要素 -->
</div>

2. widthとheightとは？

2-1. 基本的な書き方

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

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

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

2-2. display:inline の要素では幅・高さの指定ができない

初心者がつまずきやすいポイントです。display: inline の要素には width / height を指定しても効きません。

3. widthの指定方法まとめ

まずはよく使う width から見ていきましょう。覚えるべき値は3つです。

3-1. width: auto（初期値）

CSSで何も指定しない限り width: auto が適用されます。表示の仕方は要素の種類によって異なります。

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

.parent {
  /* 親要素の幅を150pxに */
  width: 150px;
}
p {
  /* width: auto（初期値）*/
  background: orange;
}

3-2. width: ◯◯px（固定幅）

px（ピクセル）で指定すると、親要素に関わらず常にその幅になります。

/* 画像の幅を80pxに固定 */
.example img {
  width: 80px;
}

3-3. width: ◯◯%（相対幅）

%で指定すると、親要素の幅に対する比率で幅が決まります。親要素の幅が変わると、子要素の幅も連動して変わります。

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

.grandpa {
  width: 200px;
  background: silver;
}
.parent {
  /* 200pxの50% → 100px */
  width: 50%;
  background: yellow;
}
.parent p {
  /* 100pxの50% → 50px */
  width: 50%;
  background: orange;
}

【補足】width: 100% と auto の違い

3-4. widthを指定しないとブラウザの幅になる

親要素のすべてにpxでの幅が指定されていない場合、最終的に body の幅はブラウザの幅と一致します。つまり、見る端末やウィンドウサイズによって幅が変わります。

3-5. %指定で要素を均等に横並びにする

横に並ぶ要素を均等に分けたいとき、%指定が便利です。

3-6. min-width と max-width

widthに「最小幅」「最大幅」の制限をかけることもできます。

.container {
  width: 90%;      /* 基本は画面の90% */
  max-width: 960px; /* ただし960px以上には広がらない */
}

4. heightの指定方法まとめ

次は height（高さ）の解説です。値の種類は width と同じ3つですが、それぞれの動作が少し異なります。

4-1. height: auto（初期値）

height: auto では、高さは中身（テキスト・画像・子要素）の分だけになります。width: auto のように横いっぱいには広がりません。

<div id="test">
  <p>子要素です。</p>
  <p>子要素2です。</p>
</div>

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

4-2. height: ◯◯px（固定の高さ）

高さをpxで固定指定した例を2つ見てみましょう。

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

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

4-3. height: ◯◯%（親要素の高さに対する比率）

widthの%とは違い、heightの%指定は少し扱いが難しいです。

なぜかというと、親要素のheightが auto（未指定）の場合、「何に対しての50%なのか」が決まらないからです。

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

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

#test1 {
  background: #e2e8f0;
  /* heightは未指定（auto）*/
}
#test2 {
  background: #e2e8f0;
  height: 100px; /* 高さを指定 */
}
p {
  height: 50%;
  background: orange;
}

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

ブラウザの画面の半分の高さにしたい場合は、html と body にも height: 100% を指定してから、目的の要素に height: 50% を指定します。

html, body {
  height: 100%; /* ブラウザの高さをベースに */
}
#headline {
  height: 50%;  /* 画面の半分の高さ */
  background: orange;
}