【超初心者向け】CSSで使われる大きさの単位

「ここの文字サイズは14ptでお願いします」

制作中にこのようなことを言ったこと、言われたことありませんか？

これを言われるとデザイナーはたいてい一時停止します。

何故ならWEBデザインではptという単位は基本使わないからです。

そこで今回はCSSで主に使われる単位の紹介をします。

長さを指定する単位

px（ピクセル）

pxとは指定されると、親要素のサイズに関わらず指定された数字になる単位です。

フォントサイズに使用する際は、デバイスのピクセル比やフォントファミリーが変わると文字の大きさが変わったり、見え方が少し変わるので、

昨今では避けられているようです。

％（パーセンテージ）

一般でも使われる割合を表す「％」。

親要素が1000pxで子要素に50％と指定すると、

子要素は500pxになります。

em（エム）

emは「％」に似ていて、親要素のサイズに対しての割合を示します。

主にフォントサイズに使われます。

親要素のフォントサイズが20pxの場合、子要素に0.5emを指定すると、

子要素は10pxになります。

font-size: 62.5%;

1em=16pxの場合、20pxを表示したい場合の計算が少し面倒です。

そこでrootのフォントサイズを62.5%にするとdefaultの16pxの62.5%、

10pxになるのです。

これをすることによってemで計算がしやすくなり、

20px＝2emと簡単にできます。

rem（レム）

remは親要素ではなく、root（html）に対する割合のサイズです。

htmlの基本のフォントサイズは16pxなので、子要素が1remだとそのまま16pxになります。

vw・vh

vw、vhはviewport widthとviewport heightの略で、画面幅や高さに対する割合です。

画面の横幅全体を100vw、画面の縦幅全体を100vh、とみなします。

まとめ

cssは大きさの単位だけでかなりの数を使い分けられています。

今回は大きさの単位を紹介しましたが、他にも時間や角度の単位を使うこともあり、奥が深いです。

全て覚えて使いこなせたらCSSを完全に理解したといっても過言ではないでしょう（！）

正しい効果測定は、正しい計測設定から！Googleアナリティクス設定項目チェックシート（無料）

Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。