cssレイアウトで何の気なしに使っている em や rem, % といった単位の違いについて、正しく理解していますか？ 私はしていません。……これを書くまでは。
css を勉強したての人でも見やすい表付きの軽いまとめです。単位に迷ったらここに帰ってきましょう。
px（ピクセル）
px は絶対長です。ビューの大きさを変化させても、px で指定した大きさは変化しません。どんなデバイスのどんな画面でも、16pxと指定すれば同じ大きさで出力されます。
絶対長の単位は他にも cm や in など色々ありますが、通常は画面サイズを表現する時の単位は px で表しますので、絶対長を使いたければこれを使うのが普通です。
em, rem
em, rem はいずれも相対長ですが、基準になる長さが異なります。
em は親要素のフォントサイズ、rem はルート要素（通常は<html>タグ）のフォントサイズを基準にしています。
以下のようなコードでこの２つの違いが分かりやすくなります。em は親要素に対しての大きさを見るためn回入れ子にするとフォントサイズがn乗されますが、rem は常にルート要素を見るため何回入れ子にしても大きさは同じままです。
<span class="ems">
em
<span class="ems">
em
<span class="ems">
em
<span class="ems">
em
</span>
</span>
</span>
</span>
<span class="rems">
rem
<span class="rems">
rem
<span class="rems">
rem
<span class="rems">
rem
</span>
</span>
</span>
</span>.ems { font-size: 1.2em; }
.rems { font-size: 1.2rem; }出力例↓
em em em emrem rem rem rem
em, rem ともフォントサイズを基準にしていますが、フォント以外の長さの指定に使っても構いません。pxで指定できるプロパティはem, rem 指定にも対応しています。
特に line-height や文章同士のmargin, padding などは、em(rem)を使って指定することでサイズの変化によるレイアウトの崩れを防止できるため効果的です。
親要素の文字サイズを指定しないとどうなる？
em や rem の参照先の要素にフォントサイズが指定されていない場合、htmlのデフォルトサイズである 16px が適用されます。
また、ブラウザのユーザーエージェントスタイルシートなどでデフォルトの値が定義されている場合はその数字を参照します。意図した大きさになっていない時は、どこの数字を参照しているか確かめるようにしましょう。
%（パーセント）
%は親要素に対する相対長を表します。
プロパティによっては em と機能的に同一です。
.ems { font-size: 1.2em; }
.percentage { font-size: 120%; }
//出力は同じ結果パーセントが他の単位と大きく異なるのはデータ型です。上に紹介した３つを含むほとんどの単位は length というデータ型ですが、%は percentage という別のデータ型になります。
このため、値として percentage を受け入れないプロパティに対しては%での値の指定ができません。たとえば、border-width は length 以外での値の指定を受け入れていませんので、%による指定ができません。
.em-border { border: 0.5em solid red; } //動作する
.percentage-border { border: 50% solid red; } //動作しないcss勉強したてで、パーセント指定した部分が動作しない時は、まずそのプロパティが受け入れることができるデータ型を確認することをおススメします。
単位一覧と機能まとめ
本記事に紹介したもの以外にもよく出てくる単位も含めて、まとめると以下のような感じになります。太字の部分を覚えておけば、思い通りに動かないことで悩むことも少なくなります。
| 絶対/相対 | 基準になる長さ | データ型 | |
|---|---|---|---|
| px | 絶対 | – | length |
| em | 相対 | 親要素のフォントサイズ | length |
| rem | 相対 | ルート要素のフォントサイズ | length |
| vw | 相対 | ビューの幅 | length |
| vh | 相対 | ビューの高さ | length |
| vmin | 相対 | vw, vh のうち小さい方 | length |
| vmax | 相対 | vw, vh のうち大きい方 | length |
| % | 相対 | 親要素 | percentage |
| (単位なし) | – | – | number |
この他にも角度、時間、解像度や周波数といったデータ型がありますが、通常そういったデータ型を表す単位をこれらの単位と混ぜて使うことはないので、ここでは扱いません。
