REDLINE MAGAZINE | CSSで指定できる長さ/length型の単位 まとめ

相対単位

相対単位一覧。内容は仕様書より抜粋。(最下部にリンクおいてます)

フォントに相対的な単位 / em、ex、ch、rem

「rem」以外の「em」、「ex」、「ch」は親要素のフォントに依存する。親要素の値が変われば自動的に値が変わる。

「em」は、1em＝親要素の１文字分のサイズ。例えば親要素のフォントサイズが16pxと指定してあるならば、1emが16px相当のフォントサイズとなり、1.2emだったら親要素のフォントサイズの２割増しとなる。今でもよく使われている単位。

「ex」は、現在のフォントのアルファベットの小文字「x」の高さを基準としたサイズを表す単位。使用した経験はない…。海外だと使われているのかもしれないけれども日本語だと馴染みがない的な感じになるのかなぁ。この単位が「x」を基準としているように、実は上の「em」はアルファベットの大文字「M」を基準としているらしいです。（あまり意識する事はないですが）

「ch」は、現在のフォントの「0（ゼロ）」の幅を基準にしたサイズを表す単位。これまた馴染みのない…。

「rem」はルート要素のフォントサイズに依存した単位。ルート要素のフォントサイズに指定された場合はそのプロパティの初期値を参照するとのこと。この「rem」はとても便利で、最近気に入っています。まだ使った事ない方、一度は使って頂きたい(*´ω｀*)

どんな時に便利かっつーと、例えばリスト要素などが入れ子になっている場合とか。
親のリスト要素にem単位でフォントサイズを指定した時、入れ子になっている子分のリスト要素にも更にフォントサイズが反映されてしまいますよね。そんな時にこの「rem」を使えば常にルート要素のフォントサイズからの相対サイズになるので、入れ子になっても楽にサイズ指定ができる、とか、使い道は多々あります。

そんなおすすめの単位「rem」のブラウザ対応状況ですが…

>> Can I use… Support tables for HTML5, CSS3, etc

最新バージョン付近のブラウザなら対応状況も良好なので、使用しても大丈夫なのではないかと思っています。

表示域百分率に相対的な単位 / vw、vh、vmin、vmax

「表示域」ってあまりなじみのない言葉ですね。日本語の専門サイトや専門書等でも英語のまま「ビューポート」って書いてある方が多い気がしますので、ここでも「ビューポート」って書きます。

ビューポートに対して相対的な単位なので、見えているブロックのサイズに変化があれば、それに応じてサイズが変わります。

仕様書によると、ルート要素の overflow の値が auto のときは、スクロールバーは存在しないものと見なされる、初期包含ブロックのサイズは、表示域のスクロールバーの有無に影響される、という細かい仕様もあるみたいです。

vw、vh、vmin、vmax、それぞれ頭の「v」はviewportの「v」ですかね？viewportのwidth、height、min、max…そう考えると分かりやすいので、そういうことにしておきましょうか、とりあえず。

「vw」は、ビューポートの横幅の 1% に等しい、「vh」はビューポートの縦幅の 1% に等しい、という相対サイズになります。例えばビューポートの横幅100分の1なら1vw、横幅100%なら100vw、といった指定になります。

「%」を使った指定とどう違うん？って話になりますが、「%」の場合は親要素を基準とした相対サイズになるので、その辺りが大きな違いになるのかな、と思います。

あくまでこちらはビューポートを基準とした単位なので、今目の前に見えている画面に対してどうこうしたい場合なんかはこちらの方が単純に考える事ができるのではないかな、と。

例えば、背景を画面横幅いっぱいにしたいとか、画面の見えてるとこまでの高さでどうこうしたい、とか。（背景だけならbackground-sizeとかでもいいのかもしれないけれども）スマホ用ページの画像サイズをビューポートに対してどのくらいのサイズにしたい、とかいう場合の指定にも使える子かもしれません。

「vmin」は、ビューポートの横幅、縦幅の小さい方の値の100分の1が1vminになります。例えば今画面のサイズが幅320px、高さ480pxの縦長の画面だとすると、「小さい方」は横幅の320pxになります。故に、1vminは320px÷100＝3.2px相当のサイズとなります。

「vmax」は「vmin」の反対で、ビューポートの横幅、縦幅の大きい方の値の100分の1が1vmaxになります。上のサイズの例でいくと、1vmaxは480px÷100＝4.8px相当のサイズとなります。

さて、気になるブラウザの対応状況ですが…

>>Can I use… Support tables for HTML5, CSS3, etc

IE11が部分的なサポートということで、微妙にイケテない感じです。

絶対単位

絶対単位一覧。内容は仕様書より抜粋。(最下部にリンクおいてます)

絶対単位での指定は、印刷物等では当然のように使われるのだけれども、モニタ等で見るwebにおいては実のところ絶対であって絶対ではないのでここで何か書くのもアレなんですが…（何）

結局のところ、紙媒体等ではなく、モニタ等で見る場合、ピクセル単位が依拠単位となります。実際の物理単位ではなく、上記表の計算式に基づいて一番近い値が再現されるという仕組みにはなるのだけれども、一応単位としては使えるよ、ということで。まぁpxはよく使いますよね。

パーセント（％）について

「%」は仕様書的にはlength型のところに入ってなかったので、上の表には入れなかったのですが、「%」はパーセント型です。（そのままなのですが）「%」は常に相対的な値となります。

単位の省略について

単位の省略は「0（ゼロ）」の場合のみ省略可能です。「0」以外は必ず単位が必要となります。単位を付けない場合はブラウザのモードを誤って解釈する場合や、全部pxを補って解釈したりする場合があるみたいです。

参考ページ

• CSS Values and Units Module Level 3
• CSS の値と単位 — CSS Values and Units Module Level 3 （日本語訳）