Web制作を学んでいると必ず出てくる、「px」「%」「em」「rem」といった単位たち。
なんとなく使っているけど、正直よくわかっていない…emとremの違いは何だろう？と思うことも多いです。
この記事では、それぞれの単位の意味や特徴、使い分けのポイントをまとめていきます。
px（ピクセル）とは？
px（ピクセル）は、画面上のドット数を表す絶対的な単位です。
例えば「100px」と指定すれば、画面のサイズや親要素に関係なく、常に100ピクセル分の幅や高さになります。
特徴
- 絶対値でサイズを指定できる
- デザインのコントロールがしやすい
よく使う場面
- 画像のサイズ
- ボーダーやマージンなど細かい調整
%（パーセンテージ）とは？
%（パーセンテージ）は、親要素に対する相対的な単位です。
たとえば「width: 50%」なら、親要素の幅の50%になります。
特徴
- レスポンシブ対応に便利
- 親のサイズに依存する
よく使う場面
- レイアウトの幅指定
- レスポンシブなデザインにしたいとき
emとは？
emは、親要素のフォントサイズを基準とする相対的な単位です。
例えば、親のフォントサイズが16pxのとき、「1.5em」と指定すれば24pxになります。
特徴
- 親のサイズに影響を受ける
- ネストが深くなるとサイズがどんどん変わることもある
よく使う場面
- ボタンや見出しなど、テキストサイズに合わせたい要素
- paddingやmarginをフォントサイズに比例させたいとき
remとは？
rem（root em）は、ルート（html要素）のフォントサイズを基準とした相対的な単位です。
親要素の影響を受けないので、emよりも予測しやすく、使いやすいです。
特徴
- 常にhtmlのフォントサイズが基準（通常は16px）
- ネストしてもサイズが変わらない
よく使う場面
- 全体のフォントサイズ管理
- 統一感のあるデザインにしたいとき
どう使い分ける？
| 単位 | 向いている場面 | 特徴 |
|---|---|---|
| px | 固定サイズが必要なとき | 絶対サイズ、デザイン通りに再現 |
| % | 柔軟なレイアウトにしたいとき | 親に依存、レスポンシブ向き |
| em | テキストに合わせたいとき | 親に依存、注意が必要 |
| rem | 安定した相対サイズがほしいとき | ルートに依存、管理しやすい |
まとめ
それぞれの単位にはメリット・デメリットがあり、場面によって使い分けることが大切です。
- 細かく調整したいとき → px
- レスポンシブな幅 → %
- テキストに比例させたい → em
- 全体を統一したい → rem
どの単位を使えばいいのか参考になれば幸いです。
コメント