株式会社マイティーエース- MightyAce Inc.

資料請求

お問い合わせ

運用型広告

Google・Yahoo!のリスティング広告はもちろん、Facebook・Instagram・LINE・XなどのSNS広告も運用が可能です。

マンガ制作

WEBマンガを中心に、LP・バナー・SNSなど、お客様の商品(サービス)の魅力を伝える完全オリジナルのマンガを制作いたします。

Webページ制作

ページに訪れるユーザーの目的と興味を引く、お客様一人一人のニーズに合わせた完全オリジナルのWebコンテンツを制作いたします。

アクセス解析

精度を高めつつ分析⇒改善のサイクルを回し続け、意思決定に繋がるレポーティングで売上最大化のお手伝いをいたします。

Web制作

【超初心者向け】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を完全に理解したといっても過言ではないでしょう(!)

Request Materials資料請求

資料請求

Webマーケティングにおけるパフォーマンス改善のための資料がダウンロードできます。

  • web広告の改善事例が知りたい方
  • 現在お願いしている代理店との比較をしたい方
  • サービスの全体像・料金を知りたい方