CSS: 長さ・大きさの指定方法

CSSで長さや大きさを指定する方法は、大きく分けて2つあります。 「実数値」を用いる方法と、「パーセント値」を用いる方法です。

実数値を用いる方法は、さらに「相対単位」を使用する方法と、「絶対単位」を使用する方法に分かれます。 上記をまとめると次のようになります。

  • 実数値
    • 相対単位
    • 絶対単位
  • パーセント値

実数値を用いる方法から順番に見ていきます。

実数値

実数値+相対単位

CSS3以前から使用されている相対単位です。特に「em」と「px」は使用頻度の高い単位です。

相対単位説明
em 該当要素の font-size の値を1とする単位。 font-size の指定に em が指定された場合は、親要素の font-size を1とする大きさ。 親要素がない場合は、ブラウザの規定値の大きさ。
ex 該当要素のフォントの x-height (小文字の x の大きさ)の値を1とする単位。 em と同じように、font-size の指定に ex が指定された場合は、親要素の x-height を1とする大きさ。 親要素がない場合は、ブラウザの規定値の大きさ。
px ディスプレイ上の1ピクセルを1とする単位。ディスプレイの解像度によって表示される大きさが変わる。

div {
    font-size: 1em;
    width: 200px;
    margin: 0;
}

上記の「margin: 0」のように、「実数値+(絶対・相対)単位」で値が0の場合は単位を省略できます。

次はCSS3で新たに追加された相対単位です。 まだブラウザの実装が追いついていない場合もありますので、 使用する場合はブラウザが対応しているかを確認してから使用してください。

相対単位説明
ch該当要素のフォントの「0(ゼロ)」の幅を1とする単位。
remルート要素のfont-size の値を1とする単位。
vwビューポートの幅を100とする単位。1vwはビューポートの幅の1%に該当。
vhビューポートの高さを100とする単位。1vhはビューポートの高さの1%に該当。
vminvwとvhのどちらか小さいほうと同じ。
vmaxvwとvhのどちらか大きいほうと同じ。

実数値+絶対単位

絶対単位説明
cmセンチメートル
mmミリメートル
inインチ(1in = 2.54cm)
ptポイント(ipt = 1/72 in)
pcパイカ(ipc = 12pt)

パーセント値

% --- 長さ・大きさを他の値に対する割合で指定。

div { width: 100%;}
HTML・CSS入門