はじめに
レスポンシブデザインでは「どのCSS単位を使うか」が大きなカギになります。
固定の px だけで作ると、画面サイズやデバイスが変わったときにレイアウトが崩れやすくなります。
そこで活躍するのが 相対的な単位（%, em, rem, vh, vw など）。
ここでは「〇〇なときはこの単位！」という逆引き形式で、場面ごとの最適な単位をまとめました。
％（パーセント）
概要
親要素のサイズに対して相対的に決まる単位。
％は、親要素の幅や高さを基準にしてサイズが決まる相対単位です。
画面やコンテナの大きさに合わせて自動的に伸縮するため、レスポンシブデザインの基本となります。
この場合に最適
- サイドバーやメインカラムなど「親ボックスに依存するレイアウト」
- フル幅の画像を、親コンテナの中で自然に縮小・拡大したいとき
- レスポンシブ対応で 親要素に従わせたいときは％が最もシンプル
em（相対単位）
概要
現在の要素のフォントサイズを基準とする相対単位。
em はテキストサイズを基準にサイズが変わる単位です。
文字の大きさに比例して余白やレイアウトも変化するため、柔軟で文字中心のUIに向いています。
この場合に最適
- ボタンのパディングを文字サイズに合わせて変化させたいとき
- フォントを大きくするときに、ラベルやアイコンの大きさも比例させたい場合
- 文字とUIのスケールを揃えたいときは em が最適
rem（ルート em）
概要
ルート要素（html）のフォントサイズを基準にする相対単位。
rem は html に設定されたフォントサイズを基準とするため、親要素に左右されません。
サイト全体の統一感を保ちやすく、デザインガイドラインに沿った設計に最適です。
この場合に最適
- サイト全体で文字サイズや余白の基準を一括管理したいとき
- コーポレートサイトやブランドサイトなど「全ページのスケール感」を統一したい場合
- 全体のデザイン基準を守るときは rem が有効
vh / vw（ビューポート単位）
概要
画面サイズそのものを基準にする単位。
vh は画面の高さ、vw は画面の幅を基準にする相対単位です。
ファーストビューや背景など「画面いっぱいに広げたい要素」に便利です。
この場合に最適
- vh → ランディングページのファーストビューを「画面の高さ100%」にしたいとき
- vw → 見出しテキストのサイズを「画面幅に比例させて」調整したいとき
- vw → 画像の高さを画面幅の比率に応じて自動で調整したいとき
- 画面そのものに依存させたいデザイン では vh / vw が最適
vmin（ビューポート短辺基準）
概要
画面の短い辺を基準にサイズを計算する単位。
vmin はデバイスの短辺を基準にするため、正方形や比率を崩さずに要素を表示できます。
ロゴやサムネイルなど、縦横比を保ちたい場面に向いています。
この場合に最適
- スマホの縦横切り替えでも崩れない正方形のアイコンや枠
- 円形やロゴなど「縦横どちらでも同じスケールで見せたい要素」
- 縦横比を守るデザイン には vmin が効果的
px（ピクセル）
概要
画面上のドット数を基準にした絶対的な単位。
px は相対単位ではありませんが、細かい調整に欠かせない基本の単位です。
1px単位で正確に指定できるため、境界線やアイコンなど繊細なデザインに使われます。
この場合に最適
- 誤差が許されない細部 では px が必須
- 1pxの境界線やシャープな罫線を正確に見せたいとき
- ブランドロゴや小さなアイコンを「絶対に崩さず」表示したいとき
