デザイン
2020.07.06
【超初心者向け】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アナリティクス・ホームページ・ランディングページなど
Webマーケティングのことなら何でもご相談ください
株式会社マイティーエースでは、様々なWeb広告・Webマーケティングなど
お客様に合ったご提案しています。
興味をお持ちいただけた方は、まずは気軽にご相談ください。