【CSS】サイズ指定

プロパティ

サイズに関するプロパティには主に以下のようなものがあります。

• width, height
• padding, margin
• top, bottom, left, right
• font-size
• border-width

単位

絶対値に対する単位

cmを基準に、物理的なサイズに対する単位となります。

この中でもよく使用されるのはpxです。

フォントサイズはデフォルトで16pxと設定されていたりします。

<div style="width: 2.54cm; height: 2.54cm">
  cm
</div>
<div style="width: 1in; height: 1in">
  in
</div>
<div style="width: 96px; height: 96px">
  px
</div>

相対値に対する単位

絶対値を基準として相対的なサイズに対する単位です。 例えば16pxの 2 倍のサイズといった指定の仕方です。

レスポンシブデザインにはこちらを指定することが多いです。

ビューポートはページの表示領域のことで、幅（横）、高さ（縦）でそれぞれ値を持ち、ブラウザサイズによって変動します。

• em, remの例
  HTML

  <div style="font-size: 12px">
    <p>あいうえお</p>
    <p style="font-size: 2em">あいうえお</p>
  </div>

  あいうえお

  あいうえお

• vh, vwの例
  100vh、100vwで画面全体の指定になります。
  HTML

  <div style="width: 10vw; height: 10vh">
    画面の1/10のサイズ
  </div>

  画面の1/10のサイズ
• vmin, vmaxの例
  ブラウザのサイズ変更をすると違いがわかると思います。
  HTML

  <div style="width: 10vmin; height: 10vmin">
    小さい方の1/10サイズ
  </div>
  
  <div style="width: 10vmax; height: 10vmax">
    大きい方の1/10サイズ
  </div>

  小さい方の1/10サイズ

  
  

  大きい方の1/10サイズ

%

%は、プロパティに対する相対値を表します。

width: 50%とすれば、widthの値を半分にするといったことです。

そのためプロパティにどのような値が設定されるかを理解した上で使用する必要があります。

<div style="width: 20vw; background: #eee">
  <div>
    指定なし
  </div>
  <div style="width: 100%">
    100%
  </div>
  <div style="width: 75%">
    75%
  </div>
  <div style="width: 50%">
    50%
  </div>
  <div style="width: 25%">
    25%
  </div>
</div>

関数

サイズに関して、以下の関数が利用できます。

calc

calcはプロパティ値対して計算を行うことができます。 計算には単位の異なるプロパティ値も使用可能です。

<div style="width: 50%">
  50%
</div>
<div style="width: calc(50% - 50px)">
  50% - 50px
</div>

max, min

maxはいくつかのプロパティ値を指定し、その中の最大値を反映します。

minは逆に最小値を反映します。

<div style="width: max(50%, 400px, 30vw)">
  max
</div>
<div style="width: min(50%, 400px, 30vw)">
  min
</div>

clamp

clampは、clamp(最小値、基準値、最大値)のようにプロパティ値を指定します。

基本的には基準値のプロパティ値が反映されますが、その値は最大値と最小値の範囲を超えないよう変動します。