知ってるようで知らないCSSのサイズ指定

エンジニアをやっていると、どこかしらでCSSに触れる機会はあると思います。 そんな時にいつも迷うのが、サイズの指定方法です。 pxや%は知っているけどremとかはよく分からずに使ってる・・・ なんて人も多いのではないでしょうか。 今回はサイズ指定方法の仕様についてまとめました。

前提

  • CSS3についてです

px(ピクセル指定)

最もオーソドックスなサイズの指定方法だと思います。 pxはデバイスにおける1dotを表す絶対値です。

ちなみに、一般的にfont-sizeのデフォルト値は16pxになっています。

使用例

sample.css 
.hoge {
  font-size: 20px;
}

%(パーセント指定)

%は親要素の対象プロパティに対する相対値です。 どういうことかというと、例えば子要素のfont-sizeを80%とした場合、親要素のfont-sizeの値が参照され、また同時に子要素のwidthを50%とした場合、親要素のwidthの値を参照します。 以降紹介していくemやrem,vmは基準となるプロパティが定まっているのに対して、%は基準となるプロパティが定まっていないのが特徴です。

使用例

sample.css 
.hogehoge {
  width : 50%;
}

余談.pxや%は小数点を指定できる？

結論から述べると「できますが、やらない方が無難」です。 なぜかというと、ブラウザやバージョン毎に小数点の丸め方が違うからです。 このあたりは、下記の資料が参考になります。

これを見てわかる通り、同じブラウザでもバージョンによって小数点を切り捨てたり、特定の桁で丸めたりと仕様が異なるため、利用ブラウザによって表示が崩れる可能性があります。 よって、使用する事自体は可能だが、あまりオススメしないです。

em(エム指定)

emは自身のfont-sizeに対する相対値です。 しばしば、親要素のfont-sizeの相対値と紹介されがちですが、例えば下記の例では<p>の枠線は10pxではなく6pxになります(親要素ではなく自身のfont-sizeの12pxに対する0.5、つまり50%となるため)。

sample.html 
<div style="font-size:20px">
  <p style="font-size:12px;border:0.5em solid">hoge</hoge>
</div>

使用例

sample.css 
.fuga {
  height : 0.7em;
}

rem(レム)指定

remはemと対照的にルート要素のfont-sizeを基準にします。 ルート要素とは<html>なので、通常はデフォルト値の16pxに対する相対値になります。

使用例

sample.css 
.fugafuga {
  width : 2rem;
}

vm(ブイエム)指定

vmはブラウザのwidthに対する相対値です。 例えばブラウザのwidthが1200pxなら1vmは12pxになります。 ここで注意したいのが、ブラウザのwidthにはスクロールバーも含まれるという点です。 つまり、100vmを指定するとスクロールバー分のwidthが設定されるため、その分だけ横スクロールが発生してしまいます。

使用例

sample.css 
.puni {
  width : 50vm;
}

動的な値計算のcalc()

一部のブラウザ限定ですが、calc()を用いて上記の値を計算することができます。

使用例

sample.css 
.punipuni {
  font-size : calc(1rem + 4px)
}

まとめ

今回はCSSにおけるサイズの指定方法について紹介しました。 それぞれ長短があり、たとえばborderのような値はブラウザや親要素によって変動しないpxを使うのがオススメです。 他の指定方法については相対的な値指定のため、レスポンシブ対応する際に非常に便利です。 目的によって適切な指定方法を使い分けることによって、より完成されたデザインになると思うので、是非それぞれの特色を覚えておきましょう。

SNSでシェアする