マイティーBlog|リスティング広告やWEBマーケティング情報

トップページ ブログ > デザイン > 【超初心者向け】CSSで使われる大きさの単位

Mighty Ace Blog

マイティーBlog

デザイン

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の16px62.5%、

10pxになるのです。

 

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

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

 

rem(レム)

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

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

 

vw・vh

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

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

 

まとめ

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

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

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

この記事に関連するタグ

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

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

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

Googleアナリティクス,アクセス解析でWeb集客分析・改善なら福岡のマイティーエース

リスティング・Googleアナリティクス・ホームページ・ランディングページなど
Webマーケティングのことなら何でもご相談ください

株式会社マイティーエースでは、様々なWeb広告・Webマーケティングなど
お客様に合ったご提案しています。
興味をお持ちいただけた方は、まずは気軽にご相談ください。

あわせて読みたい人気の記事

よく見られている記事

最新記事

BLOG MENU

株式会社マイティーエースのSNSもチェックしてみてください

Copyright (c)2014-2020 MightyAce, inc. All Right Reserved.