CSSでサイズ指定に使う単位といえばpxやem、%などがありますが、なんとなく使ってしまいがちなので、一度整理してみたいと思います。
絶対的な長さの単位と相対的な長さの単位の使い分けや、それぞれの単位の意味を解説します。
CSSにおける主な長さの単位の一覧
まずはどんな単位があるのかざっと一覧してみましょう。ここでは、よく使われる単位だけ取り上げています。
| 単位 | 意味 |
|---|---|
| px | 1/96インチ |
| % | ※プロパティによって基準が異なる |
| em | その要素のフォントサイズの○倍 |
| rem | ルート要素のフォントサイズの○倍 |
| cap | その要素のフォントのCap heightの○倍 |
| ch | その要素のフォントの0（ゼロ）の幅の○倍 |
| ex | その要素のフォントのx heightの○倍 |
| lh | その要素のline-heightの計算値の○倍 |
| vw | ビューポートの幅の○% |
| vh | ビューポートの高さの○% |
| vmin | ビューポートの小さい側の○% |
| vmax | ビューポートの大きい側の○% |
| svh | 縮んだビューポートの高さの○% |
| dvh | 動的ビューポートの高さの○% |
長さの単位の使い方
長さ（サイズ）の値には必ず単位をつけます。ただし、値が「0」の時は単位をつける必要はありません。（つけても構いません。）
「font-size: 20;」とか書いても認識されません。「そこはpxでしょ！推して知れ！」とか言っても無理です。
単位は大文字小文字区別しませんので、1PXや5REMなどと書いても大丈夫です。書いてる人見たことありませんが。
単位は数値の直後につけます。間に空白を挟んではいけません。
絶対的な長さの単位【px】
CSSで絶対的なサイズ指定といえばpx（ピクセル）ですね。他にもptやpc、cm、mmなども使えますが、使うとしたら印刷用のスタイルシートくらいでしょう。
ここでは絶対的な長さの単位イコールpxとして話を進めます。
px単位のメリット
pxを使えば「この要素のフォントサイズは16px」「ここの要素間の余白は50px」といった感じで分かりやすくなります。
コーディングの際に%やemに換算する必要はありませんので、サクサク進みます。
px単位のデメリット
標準的で分かりやすいpxですが、柔軟性に欠けるのが弱点です。
たとえば全要素のフォントサイズをpxで指定していた場合、「やっぱり全体的に文字サイズ一回り大きくするよ～」となった時に全部修正しなければいけません。
ただ、相対的な単位を使えばそういうことが起きないかと言えばそうとも言えないので、別に気にしなくていいと思います。むしろ変数を使った方がいいです。
あとは、フォントサイズをpx指定で固定すると、ブラウザの文字サイズ設定が効かないのでアクセシビリティ上の問題にもなり得ます。
というわけで、要するに適切に使い分けることが大切です。
px指定の使いどころ
ここはサイズを固定したい！というところで使います。
たとえば固定ヘッダーの高さ、サイドバーの幅、コンテンツ領域のMAX幅とか、あとボーダーの太さも……結構使ってますね。
絶対的な長さ単位は、印刷など固定サイズの媒体用のスタイルシートにも向いています。
ただし、その場合はpxよりptやmmを使ったほうが分かりやすいでしょう。
相対的な長さの単位
emや%などは、基準となる長さに対する倍率やパーセント値を表わしていて、相対的なサイズ指定となります。
何が基準になるかは、その単位あるいはプロパティによって決まります。フォントサイズや親要素の幅など色々です。
相対的なサイズ指定のメリットは、px単位のデメリットとして挙げた問題を解決できること。
相対的なサイズを使うことで、柔軟なレイアウトが可能になり、すっきりしたメンテナンスしやすいコードが書けます。
主な単位を説明していきます。
【%】プロパティによって基準が違う
%は、厳密には長さの単位ではなく、パーセント値という特殊な数値に付けられる単位です。
プロパティによって基準が異なるし、border-widthのように%値を使えないプロパティもあります。
さまざまなプロパティで活躍する単位ですが、正しく理解してきちんと使いたいところです。
%値の基準一覧（代表的なプロパティのみ）
よく使う%値のざっくりした一覧を作ってみました。
| プロパティ | 基準 |
|---|---|
| font-size | 親要素のフォントサイズ |
| width margin padding left right | 親要素の幅 |
| height top bottom | 親要素の高さ |
| border-radius translate | その要素の幅や高さ |
| border-width | ※使えない |
上下の余白も幅が基準になっている点に注意
マージンやパディングは親要素の幅に対する%値なので、上下のマージンやパディングも親要素の高さではなく幅で決まります。
感覚的には何か違うような気もしますが、慣れると、これがしっくり来ることが分かります。
【emとrem】フォントサイズ基準
emとremは、フォントサイズを基準とした長さの単位です。
em
em単位の基準となるのは、その要素のフォントサイズ。
その要素のフォントサイズが10pxなら、1.5em = 15pxとなります。
テキストとのバランスが大事な、余白やボタンサイズなどの設定に向いているといえるでしょう。
フォントサイズをemで指定する場合は、親要素のフォントサイズに対する相対値になります。
ちょっと紛らわしいので、フォントサイズの指定には%かremを使うと分かりやすくなるかと思います。
rem
remは、ルート要素のフォントサイズに対する相対値です。要するに、html要素のフォントサイズの○○倍という意味。
フォントサイズにおいて、emや%は親要素に依存するため、階層の中で繰り返し使うと訳の分からないことになります。
そこで、親要素に依存することなく相対的なサイズを指定できるremが活躍するというわけです。
【capとchとexとlh】フォントに基づく大きさ
該当する要素のフォントが持つ様々なサイズを基準とした長さの単位もあります。
capとchとex
capは、その要素のフォントにおけるCap Height、つまり普通の大文字の高さを表します。
chは、その要素のフォントにおける0（ゼロ）の幅を表します。
exは、その要素のフォントにおけるエックスハイト、つまり小文字のxの高さを表します。
1文字分の幅と高さが出せるので、文字の配置を細かくコントロールしたい時に使える‥‥‥ような気がします。日本語サイトだとそんなに使わないかもしれません。
ルート要素のフォントを基準にしたrcap、rch、rexもあります。
lh
lhは、その要素のline-heightの計算値です。つまり1行の高さということです。
文字ベースでボックスの高さを決めたいときに重宝します。
たとえば height: 4lh にするだけで、4行のテキストが綺麗に収まる高さを実現できます。
ルート要素を基準にしたrlhもあります。
【vwとvhとvminとvmax】ビューポート基準
vw・vh・vmin・vmaxはビューポートのサイズを基準とした長さの単位です。
要するに、ブラウザのウィンドウサイズの幅や高さに対して何パーセントか、という意味。
画面の幅や高さに合わせて流動的にサイズが変わるデザインで活躍します。
vw
vwはビューポートの幅に対するパーセント値です。
たとえば、ビューポートの幅が1920pxなら、1vw = 19.2px になります。
基準となる長さにはスクロールバーの幅も含まれているので、画面いっぱいのサイズを意図して100vwに指定すると、スクロールバー分はみ出すことになるので注意。
vh
vhはビューポートの高さに対するパーセント値です。
たとえば、ビューポートの高さが1080pxなら、1vh = 10.8px になります。
vmin
vminは、ビューポートの幅と高さの小さい方に対するパーセント値です。
たとえば、ビューポートの幅が1920px、高さが1080pxなら、1vmin = 10.8px になります。
vmax
vmaxは、ビューポートの幅と高さの大きい方に対するパーセント値です。
たとえば、ビューポートの幅が390px、高さが844pxなら、1vmax = 8.44px になります。
sv*・lv*・dv*
上記の単位にsが付いたsvw、svh、svmax、svminもあります。
これは小さいビューポートサイズ、つまりアドレスバーの伸縮によって縮んだビューポートの大きさが基準になります。
lが付いたlvw、lvh、lvmax、lvminは大きいビューポートサイズが基準で、vw、vh、vmax、vminと同等です。
dが付いたdvw、dvh、dvmax、dvminは動的ビューポートサイズが基準になるので、ビューポートの変化に合わせて変動します。
モバイルでビューポートが伸縮しても崩れないデザインにするためにsvhやdvhを使うことがあります。
px・%換算ツール
rem, em, %などを使うところで、「ここは実質18pxにしたいから‥‥‥ってことは何%だ？」的な時に使えるツールを作ってみました。
基準つまり100%に相当するpx値を指定したら、あとは数値を入力するだけでpx値と%値を相互に換算してくれます。
rem指定にする場合は、100%を1remと読み替えればOKです。
See the Pen Untitled by Takayuki Kojima (@takayuki-kojima) on CodePen.
こんなことのためにツール作る必要ない気もしますが、地味に便利かもしれない‥‥‥
【calc】で異単位間交流をしよう
calc関数の中では、異なる単位の値どうしの計算が可能です。
サイドバーの幅を300px、メインセクションの幅をcalc(100% – 300px)にするとか。
まとめ
それぞれの単位の意味を理解し、いつでも最適な単位でサイズ指定したいものですね。
コメント