CSSの単位のpx・em・rem・vh・vwの違いと使い方

HTML/CSS

今回は、WEBサイトを構築する際に使うCSSで使用されている文字や要素の長さや大きさの単位である「px」「pt」「em」「rem」「vw」「vh」「vmin」「vmax」「%」などの単位について、それぞれの意味と違い、そして使い方を紹介していきます。

基本的なフォントサイズの指定の方法は以下の記事で詳しく書いています。

CSSの単位一覧表

サクッと調べたい方は下記を参照して下さい。

単位説明用途
em1em=親要素に設定されているフォントサイズフォントサイズ・ボックスサイズの設定
rem1rem=<html>に設定されているフォントサイズ
(標準では1rem=16ピクセル)
フォントサイズの設定
vw1vw=ビューポートの1/100の幅ボックスサイズの設定
vh1vh=ビューポートの1/100の高さボックスサイズの設定
vmin1vmin=ビューポートの幅か高さ、
どちらか短い方の1/100
ボックスサイズの設定
vmax1vmax=ビューポートの幅か高さ、
どちらか長い方の1/100
ボックスサイズの設定
px1px=1ピクセルの大きさフォントサイズ・ボックスサイズの設定
pt1pt=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となります。(下記の様に)

親フォントは1emのサイズ
これは1.5emのサイズ

親要素のフォントサイズ=15pxem
15px1em
30px2em
45px3em
20px1.33333…em
10px0.63333…em
1.5px0.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*/
}

これは1.8remのサイズ
これは2.2remのサイズ

「vw」の使い方

vwはビューポートの1/100の幅です。(幅のみですが縦横比は維持されます。)

例えば、ビューポートの幅が1200の場合1vwは12pxになります。

vwの単位は可変すぎてフォントサイズには基本的に不向きです。ただレスポンシブに対応しやすいので好んで使うエンジニアの方も少なからずいるかと思います。

一方、ボックスのレスポンシブ化には非常に向いているので使用率は高いです。

4vwのサイズ
5vwのサイズ

1vw余白のボックス

ビューポートとは?

ビューポートとは、Webページが表示される領域のことです。
PCの場合はブラウザでWEBページを閲覧してる時のウィンドウ。スマホではアドレスバーやツールバーを除いた画面全体がビューポートです。

「vh」の使い方

vwはビューポートの1/100の高さです。(高さのみですが縦横比は維持されます。)

これは先ほどのvwの高さバージョンです。

例えば、ビューポートの高さが600だと1vhは6pxになります。

4vhのサイズ
5vhのサイズ

1vh余白のボックス

「vmin」の使い方

vminはビューポートの高さと幅の短い方の1/100です。

例えば、ビューポートが高さ600幅1200だった場合は幅600の方が短いので1vminは600の1/100となり6pxとなります。

5vminのサイズ

「vmax」の使い方

vmaxはビューポートの高さと幅の長い(大きい)方の1/100です。
先ほどのvminと反対で大きい方になるだけです。

例えば、ビューポートが高さ600幅1200だった場合は幅1200の方が長いので1vmaxは1200の1/100となり12pxとなります。

5vmaxのサイズ

「px」の使い方

pxはテレビなどのディスプレイで良く言われている画素数(ドット)のことです。

1pxはディスプレイの1ドットとなり、10pxは10ドット分の大きさになります。
なので見ている端末で大きさは変わっていきます。

また今まで紹介してきた単位の指標に使われる最も標準的な単位です。
そのため全ての単位は見ているディスプレイで大きさは変わっていきます

「pt」の使い方

1pt= 1/72インチで、約0.035cmです。

基本的にWEBでは使わないので覚えなくて大丈夫です。

「%」の使い方

%は基準となる数値のパーセンテージです。

当サイトの基準のフォントサイズは17pxです。その基準に対して100%なら17px。50%なら8.5px。150%なら25.5pxとなります。(下記の様に)

100%のサイズ150%のサイズ


以上が「CSSの単位のpx・em・rem・vh・vwの違いと使い方」でした。

いろんな単位がありますが、個人的にはpx、em、remを覚えておけば何とかなると思ってます。時点でvw、vhを覚えていきましょう。

また単位を使いこなせる様になると、レスポンシブ化で大活躍してきます。現場で出来るエンジニアになりたいならば全ての単位を網羅しときましょう。

2020年7月11日HTML/CSSCSS,WEB,WEB用語

Posted by KT