CSSでwidth（幅）とheight（高さ）を設定してみよう

2022年1月21日

今回はCSSで幅や高さを設定する方法を覚えましょう。

この記事の目次

幅と高さとは？

CSSにおける幅と高さは、width(幅)、height(高さ)というプロパティを指定します。指定することで要素に幅と高さを持たせることができます。

それぞれ指定方法は同じです。以下の様になります。

{width: 数値 単位;}
{height: 数値 単位;}

数値には指定したい整数を、単位には「px」もしくは「%」を指定します。また、初期値は値が「auto」となります。

widthとheightをpxで指定すると、親要素に関係なく幅を設定することができます。

親要素より大きな数値を指定すると、はみ出して表示されます。

<div class="box1"><p>box1</p></div>

.box1{
  width: 200px;
  height: 100px;
  background:blue;
}

box1

幅や高さは「%」で相対的に指定することもできます。%で指定すると、親要素に対しての比率を設定でき、特にスマホサイトやレスポンシブサイトなどでは、スマホの画面サイズに合わせて要素の幅や高さを変える（※可変と言います。）ことが必須となります。

なぜなら、px指定では絶対値で表示されてしまう為、画面から要素がはみ出してしまう為です。

<div class="parent">
  <div class="box2"></div>
</div>

.parent{
  width:300px;
  height:300px;
  border:1px solid red;
}
.box2{
  width: 80%;
  height: 80%;
  background:blue;
}

box2

少々難しい話ですので、今は参考程度に留めてもらって構いません。
heightを%で指定することは多くはありませんが、スマホサイトなどで画面いっぱいに高さを指定したいということもあるかと思います。

しかし、widthと違いheightに%指定するのは、少し面倒です。上記で述べたように、%指定すると、「親要素の何%か？」ということになります。

つまり親要素に高さを指定しなければなりません。通常、Webページでは高さを指定することは多くありませんので、上手く高さが設定されません。

「width:auto」、「height:auto;」と指定する、もしくは何も指定しないと、幅や高さは「自動設定」となります。

width:autoは、横幅いっぱいに要素が広がります。

また、親要素がある場合は、width:autoを指定すると、親要素の幅いっぱいに広がります。

height:autoを指定すると上記でも述べたように、親要素に高さが指定されている場合のみ高さいっぱいに要素が広がります。

ここで、１つ疑問に感じた方も多いのではないでしょうか？
heightは親要素に高さ指定しなければ反映されないのに対し、widthは反映されるのかということです。

これは、「ブラウザの特性」に関係します。

例えば、親要素の親、その親、さらにその親…と見ていったとき、最終的には「body」という要素に行き着きます。このbodyという要素は、「ブラウザの幅」が初期設定で反映されます。つまり、width（幅）には予め親要素の幅が設定されています。

ですから、autoを指定しても横幅いっぱいに広がるということです。

よかったらシェアしてね！