今回は、WEBサイトを構築する際に使うCSSで使用されている文字や要素の長さや大きさの単位である「px」「pt」「em」「rem」「vw」「vh」「vmin」「vmax」「%」などの単位について、それぞれの意味と違い、そして使い方を紹介していきます。
基本的なフォントサイズの指定の方法は以下の記事で詳しく書いています。
CSSの単位一覧表
サクッと調べたい方は下記を参照して下さい。
| 単位 | 説明 | 用途 |
|---|---|---|
| em | 1em=親要素に設定されているフォントサイズ | フォントサイズ・ボックスサイズの設定 |
| rem | 1rem=<html>に設定されているフォントサイズ （標準では1rem=16ピクセル） | フォントサイズの設定 |
| vw | 1vw=ビューポートの1/100の幅 | ボックスサイズの設定 |
| vh | 1vh=ビューポートの1/100の高さ | ボックスサイズの設定 |
| vmin | 1vmin=ビューポートの幅か高さ、 どちらか短い方の1/100 | ボックスサイズの設定 |
| vmax | 1vmax=ビューポートの幅か高さ、 どちらか長い方の1/100 | ボックスサイズの設定 |
| px | 1px=1ピクセルの大きさ | フォントサイズ・ボックスサイズの設定 |
| pt | 1pt=1ポイント（1/71インチ、約0.035cm） | フォントサイズ・ボックスサイズの設定 （あまり使われない） |
| % | 基準となる長さや大きさのパーセンテージ | フォントサイズ・ボックスサイズの設定 |
em、rem、pxはWebではよく使用するので特に理解しておきましょう。
様々なCSSの単位の使い方
次に上記一覧表に記載した単位の使い方を一つずつ紹介します。
「em」の使い方
emは親要素に設定されているフォントサイズです。
例えば親要素のフォントサイズが15pxだった場合、1emは15pxになります。2emになると単純に2倍なので30pxになります。
反対に20pxにしたい場合は、0.1em＝1.5pxと計算することで1.33emが約20pxとなります。（下記の様に）
| 親要素のフォントサイズ＝15px | em |
|---|---|
| 15px | 1em |
| 30px | 2em |
| 45px | 3em |
| 20px | 1.33333…em |
| 10px | 0.63333…em |
| 1.5px | 0.1em |
「rem」の使い方
remは標準のHTMLのフォントサイズ16pxに対しての単位です。
なのでデフォルトでは1rem=16pxで、2rem=32pxです。
しかし下記のように、htmlに「font-size: 62.5%；」を指定しておくと、「10px = 1rem」となるので、
px単位で計算が出来る様になります。
html {
font-size: 62.5%; /*ベースを10pxにしています*/
}
body {
font-size: 1.5rem; /*18px*/
}
h1 {
font-size: 2rem; /*22px*/
}
「vw」の使い方
vwはビューポートの1/100の幅です。（幅のみですが縦横比は維持されます。）
例えば、ビューポートの幅が1200の場合1vwは12pxになります。
vwの単位は可変すぎてフォントサイズには基本的に不向きです。ただレスポンシブに対応しやすいので好んで使うエンジニアの方も少なからずいるかと思います。
一方、ボックスのレスポンシブ化には非常に向いているので使用率は高いです。
ビューポートとは、Webページが表示される領域のことです。
PCの場合はブラウザでWEBページを閲覧してる時のウィンドウ。スマホではアドレスバーやツールバーを除いた画面全体がビューポートです。
「vh」の使い方
vwはビューポートの1/100の高さです。（高さのみですが縦横比は維持されます。）
これは先ほどのvwの高さバージョンです。
例えば、ビューポートの高さが600だと1vhは6pxになります。
「vmin」の使い方
vminはビューポートの高さと幅の短い方の1/100です。
例えば、ビューポートが高さ600幅1200だった場合は幅600の方が短いので1vminは600の1/100となり6pxとなります。
「vmax」の使い方
vmaxはビューポートの高さと幅の長い（大きい）方の1/100です。
先ほどのvminと反対で大きい方になるだけです。
例えば、ビューポートが高さ600幅1200だった場合は幅1200の方が長いので1vmaxは1200の1/100となり12pxとなります。
「px」の使い方
pxはテレビなどのディスプレイで良く言われている画素数（ドット）のことです。
1pxはディスプレイの1ドットとなり、10pxは10ドット分の大きさになります。
なので見ている端末で大きさは変わっていきます。
また今まで紹介してきた単位の指標に使われる最も標準的な単位です。
そのため全ての単位は見ているディスプレイで大きさは変わっていきます。
「pt」の使い方
1pt= 1/72インチで、約0.035cmです。
基本的にWEBでは使わないので覚えなくて大丈夫です。
「%」の使い方
%は基準となる数値のパーセンテージです。
当サイトの基準のフォントサイズは17pxです。その基準に対して100%なら17px。50%なら8.5px。150%なら25.5pxとなります。（下記の様に）
以上が「CSSの単位のpx・em・rem・vh・vwの違いと使い方」でした。
いろんな単位がありますが、個人的にはpx、em、remを覚えておけば何とかなると思ってます。時点でvw、vhを覚えていきましょう。
また単位を使いこなせる様になると、レスポンシブ化で大活躍してきます。現場で出来るエンジニアになりたいならば全ての単位を網羅しときましょう。
