【CSS】要素の横幅と高さを指定する方法

HTML要素の横幅と高さを変える方法で一番わかり易く使用頻度の高いものにwidth属性(横幅: ウィドゥス)とheight属性(高さ: ハイト)があります。

要素内にテキストなど高さのある内容が含まれている場合は、要素の高さはその内容の高さに自動的に調整されます
これはheight属性の初期値がauto(自動)であるためです。


div {
    background-color: yellow;
}

span {
    background-color: orange;
}
    

<div>
    <span>こんにちは</span>
</div>
    
こんにちは

この例のとおり、height(高さ)は自動で調整されますが、width(横幅)はdiv要素とspan要素で差があることがわかります。

要素のwidth(横幅)やheight(高さ)がどの様に適用されるかなどについてはdisplay属性の値によって決まります。
display属性についてはこちら

そのため、今回の学習ではdisplay属性がblockであるdiv要素を使用して説明します。

理解度チェック

  • 要素の横幅を指定する属性はなんですか?
  • 要素の高さを指定する属性はなんですか?
  • 高さの属性の初期値は何ですか?また、どの様なものですか?

値の単位について

width属性やheight属性には単位を用いた数値を設定します。

font-size属性の学習で説明したpx(ピクセル)、em(エム)、rem(レム)で指定することや、画面幅(ビューポート: viewport)やパーセンテージで指定することなどが可能です。

px(ピクセル)で指定する


div {
    background-color: yellow;
    width: 100px;
    height: 50px;
}
    

<div></div>
    

em(エム)で指定する

em(エム)は親要素font-size属性の値との相対的な値を設定する場合に使います。

次の例では、親要素であるbody要素のfont-size属性には20pxが設定されているため、div要素のwidth20px * 5 = 100pxheight20px * 2.5 = 50pxがそれぞれ設定されます。


body {
    font-size: 20px;
}

div {
    background-color: yellow;
    width: 5em;
    height: 2.5em;
}
    

<body>
    <div></div>
</body>
    

rem(レム)で指定する

rem(レム)はルートhtml)要素のfont-size属性の値との相対的な値を設定する場合に使います。

次の例では、ルート要素であるhtml要素のfont-size属性には20pxが設定されているため、div要素のwidth20px * 5 = 100pxheight20px * 2.5 = 50pxがそれぞれ設定されます。


html {
    font-size: 20px;
}

div {
    background-color: yellow;
    width: 5rem;
    height: 2.5rem;
}
    

<div></div>
    

%(パーセンテージ)で指定する

%(パーセンテージ)は親要素width属性またはheight属性の値とのパーセント値を設定する場合に使います。

div要素の横幅はdisplay: block;の特徴で目一杯(つまり100%)使用されますが、次の例では親のdiv要素を50%、さらにその子div要素のwidthを50%(50%の50%なので25%)に設定する例です。


div {
    background-color: yellow;
    width: 50%;
    height: 20px;
}

div div {
    background-color: orange;
    width: 50%;
    height: 50%;
}
    

<div>
    <div></div>
</div>
    

親のdiv要素にはheightに絶対値であるpx(ピクセル)を使用しています。なぜなら、heightの場合はそもそもの高さが0であるためパーセントを指定しても0となってしまうためです。

vw(ビューポートウィドゥス)で指定する

vw画面そのものの横幅の最大値を100としたパーセント値で設定します。


div {
    background-color: yellow;
    width: 50vw;
    height: 20px;
}
    

<div></div>
    

vh(ビューポートハイト)で指定する

vh画面そのものの高さの最大値を100としたパーセント値で設定します。


div {
    background-color: yellow;
    width: 50vw;
    height: 10vh;
}
    

<div></div>
    

理解度チェック

  • 親要素の横幅の半分のサイズを指定する属性と値は何ですか?
  • 親要素のフォントサイズの倍のサイズを指定する値は何ですか?
  • 画面の高さ一杯を指定する属性と値は何ですか?

最大値と最小値を指定する

横幅の最大値を指定するmax-width属性、横幅の最小値を指定するmin-width属性があります。
同じ様に高さにもmin-height属性、max-height属性があります。

これらの属性は特にレスポンシブデザインに有用です。
スマホで見るWebサイトとパソコンで見るWebサイトでは画面の大きさが違うため、要素の大きさもそれぞれ変更する必要がでてきます。画面ごとの要素のスタイルをCSSで定義し、画面サイズに応じた要素の見た目を表示することをレスポンシブデザインと言います。

最大値を指定しない場合の例

例えば、大きい画面ではwidth: 500px;で表示している要素を、横幅が360pxしかない小さい画面で表示するとどうなるでしょうか?
次の例では、widthが10%で設定された親要素(黄)に、width250pxで指定された
子要素(オレンジ)があります。


div {
    background-color: yellow;
    width: 10%;
    height: 20px;
}

div div {
    background-color: orange;
    width: 250px;
    height: 50%;
}
    

<div>
    <div></div>
</div>
    

黄色の親要素をスマホのような小さい画面の幅だと考えてみてください。
オレンジの要素が画面の幅より大きいため、横にスクロールしなければ全体を見られなくなっています。

最大値を指定する場合の例

横幅の最大値であるmax-width属性を指定します。使用できる値の単位はwidthに使用できる単位と同じです。

オレンジの横幅の最大値を100%に指定することで、黄の親要素からはみ出す心配がなくなりました。


div {
    background-color: yellow;
    width: 10%;
    height: 20px;
}

div div {
    background-color: orange;
    width: 250px;
    max-width: 100%; /* 最大値を指定します */
    height: 50%;
}
    

<div>
    <div></div>
</div>
    

黃の親要素が250px以上の横幅のサイズを確保できる場合は、オレンジの子要素は常に250pxで表示されます。

理解度チェック

  • 最大値はどのような場合を想定して指定しますか?
  • 最小値はどのような場合を想定して指定しますか?考えてみましょう。

前のレッスン
次のレッスン

Twitterでアウトプット

理解したことや分からないところはTwitterでつぶやいてみよう!

この学習ページで学んだことをTwitterでアウトプットしてください。

アウトプットするメリット

学習仲間が増える

同じ課題を持った仲間が増えるため、学習へのモチベーションが継続しやすくなります。

より深く理解する

頭では理解したと思っていても、文章化することで初めて気づくことがあります。