【保存版】remにvh、mozmm…あまり知られていないけれど知ると得するCSSの単位まとめ

更新日: 2018年05月28日

「この単位、なんだ？初めて見た・・・」

CSSが初めに登場してからかなりの時間が経過していますが、CSSに触れている経験が長いひとでも、一度はこのように思ったことがあるのではないでしょうか。
CSS歴10年以上の方でも*「長さの指定にはpxしか使わない」*という人も珍しくはありません。

実際、CSSは小さな仕様変更を繰り返しており、W3Cの草案作成・勧告といった正式なプロセスを経て便利な単位やプロパティは続々と追加されています。

CSSにおいて、単位を操ることができれば、デザインやレイアウトを行う上でかなり幅が広がることになります。

これから紹介するように、CSSにはすでにさまざまな単位がありますが、知らなかったがために回り道をしてしまっていた、あるいは知っていたらもっと短く書けるコードも多く存在します。

今回は、あまり知られていないけれど知ると得するCSSの単位をまとめていきます。
単位についてわからないことがあれば、一旦この記事に戻ってみてください。

CSSの単位のカテゴリ分け

画像引用元：pexel.com

一口に「CSSの単位」と言っても、あらゆる場所で使えるものもあれば、一部のCSS関数内で使えるものなど、使える場所が限定されている場合もあります。

CSSの単位をカテゴリ分けすると、以下のようになります。

1. PERCENTAGE型

PERCENTAGE型は、割合を示す値に使われます。
正確に言えば単位ではないのですが、何らかの値を基準として、その割合を示します。

PERCENTAGE型は、その名前の通り*「％」*が用意されています。

2. LENGTH型

LENGTH型は、長さを表す単位に使われます。
オブジェクトの高さやマージンの幅など、あらゆるシーンで使う単位です。

LENGTH型には、ブラウザの設定や環境に依存する相対単位と、ブラウザ環境に依存しない絶対単位があります。
前者には*「px」「ex」「em」「rem」*があり、後者には　*「ch」「cm」「mm」「q」「in」「pt」「pc」「mozmm」「vw」「vh」「vmin」「vmax」*があります。

3. ANGLE型

ANGLE型は、角度を表す単位に使われます。

この型に当てはまるのは、*「deg」「grad」「rad」「turn」*があります。

4. TIME型

TIME型は、時間を表す単位に使われます。
アニメーションやトランジションなどで使う場面が多いでしょう。

*「s」「ms」*がこの型に当てはまります。

5. FREQUENCY型

FREQUENCY型は、周波数を表す単位に使われます。

この型に当てはまるのは、*「Hz」「kHz」*があります。

6. RESOLUTION型

RESOLUTION型は、デバイスの解像度を表す単位に使われます。
主にMedia Queryの式で利用します。

この型に当てはまる単位は、*「dpi」「dpcm」「dppx」*です。

それでは、以下でそれぞれの単位の詳細を確認していきましょう。

PERCENTAGE型の単位

％

画像引用元：pexel.com

言わずとしれた、割合を表すのが、「％」(パーセンテージ)です。
CSSではLENGTH型やANGLE型の代用で使われることがあります。
長さを表すプロパティ(widthやheight、marginやpaddingなど)では、指定する要素の親要素の値が基準値となります。
角度の場合には円周(360度)を基準に割合を決めていきます。

LENGTH型の単位

px

画像引用元：pexel.com

「px」は「pixel」(ピクセル)の略です。
「px」はブラウザ環境に依存しない絶対単位だと誤解されていることが多いですが、実際には相対単位です。

CSSにおけるピクセルは、スクリーンサイズのピクセルとは実際には異なっています。
W3Cによるドキュメントによれば、「px」に関して次のような定義がなされています。

px：ピクセルユニット ── 1pxは0.75ptと同値

これによれば「1px＝0.75pt」となっており、「px」はピクセルの大きさからくる絶対値ではなく、「pt」の大きさを元に測った相対指定の値であることがわかります。
デバイスのピクセル比もデバイスによって変わるので、iPadで見る時とKindleで見る時とGalaxy Tabで見る時で、文字の大きさも違って見えるのです。

そのため、昨今のWeb業界では、フォントサイズに「px」を使わない方がいいと考える人も増えています。

参考：
CSSで知っておきたい、フォントサイズ指定の単位のすべて

ex

「ex」は一般的にそのまま「エックス」と読むか、「エックスハイト」と読みます。

文字の大きさの基準を、小文字のxの高さを基準にしたものなので、「x-height」(xの高さ)という意味の単位になっています。
その時点のコンテナの中にある「x」文字の高さを1exとし、line-heightやmarginといったプロパティで使用されることがあります。

em

「em」はそのまま「エム」と発音されます。

「ex」が「x」の高さを基準にしているのに対し、「em」は定義としては大文字の「M」の幅を基準とした単位とされています。
しかし実際には親要素のフォントサイズを基準とした単位とされています。

例えば、24pxが指定された親要素に対して、子要素に1emを指定すれば24px相当の文字サイズになります。
一方、0.5emを指定すれば12px相当のサイズになります。

ただし、相対指定は親要素の影響を受けてしまう、いわゆる「複利」の計算になってしまうので、入れ子された要素のときには注意が必要です。

rem

「em」は親要素に対しての相対計算を行いますが、「rem」はルート要素(通常はhtml)のフォントサイズを元に計算します。
常にルート要素が基準となるので、非常にわかりやすくスッキリとデザインを行うことができます。

何もルート要素のフォントサイズを指定していない場合は「1rem＝16px」という計算方法になるので、初めのうちはpxを扱っているときのように試行錯誤しながら適切なフォントサイズを探すことになるでしょう。

ch

「ch」はある要素の現在のフォントの数字の「0」の横幅を1chとするもので、等幅フォントと組み合わせるときにまれに使われる単位です。

以前はChromeが未サポートでしたが、最新バージョンでは対応しています。
IEでもサポートはしていますが、実際の「0」の横幅よりも短く表示されてしまうようなので注意が必要です。

cm・mm・q

画像引用元：pexel.com

「cm」は1cm(センチメートル)、「mm」は1mm(ミリメートル)、「q」は四分ミリメートルといって1q＝1/4mmとなる単位です。
いずれも絶対単位であり、ディスプレイよりもプリンターなど出力メディアの物理的な特性が分かっている場合に便利です。

in・pt・pc

同じく絶対単位として「in」「pt」「pc」があります。

「in」はインチのことで、1in＝2.5cmで定義することができます。
「pt」はポイントで、1pt＝1/72in＝0.3528mmで定義することができます。
「pc」はパイカで、1pc＝12ptで定義することができます。

mozmm

「mozmm」はMozilla Firefoxによる実験的な単位で、ディスプレイ解像度に関係なくディスプレイ上に正確に1mmを描画しようとする単位です。
Firefoxのほか、Safariも対応しています。

vw・vh

画像引用元：pexel.com

「vw」「vh」はそれぞれviewport widthとviewport heightの略で、現在のViewportに対する割合です。
例えば、回り込みを指定した上で、「width: 50vw」「height: 100vh」と指定すれば、高さ100％のコンテナを2つ横並びに並べることができます。

％を使わない理由は、親要素に引きずられることなく、直接Viewportに対する値を指定できるからです。

vmin・vmax

「vmin」「vmax」はそれぞれ「vw」「vh」のうち小さい方の値と大きい方の値を適用することができます。
例えば、「width: 50vmin」としておけば、ブラウザが横長のときにwidthは縦幅に対して50％、ブラウザが縦長のときにはwidthは横幅に対して50％の長さになります。

少々分かりにくいですが、レスポンシブデザインのときに役立つ時が多々あるでしょう。

ANGLE型の単位

deg・rad・grad

画像引用元：pexel.com

「deg」はdegree(度)の略で、360degで1円周分と同じです。
「rad」はradian(ラジアン)のことで、「円・扇の弧の長さ÷円の半径」が定義ですが、2πradで1円周分と同じになります。
「grad」はgrade(グラード)もしくはgradian(グラジアン)で、1gradは直角(90度)の100分の1、360deg＝400gradで1周分と同じになります。