CSSにおける単位とは？
CSS（カスケーディングスタイルシート）の単位は「文字サイズ」「余白」「幅や高さ」などを指定するときに使います。
大きく分けると「絶対的な大きさを表す単位」と「親要素や画面に依存する相対的な単位」があります。
それぞれの特性を理解すると、より柔軟で見やすいデザインが可能になります。
px（ピクセル）
画面上のドット数を基準にした絶対的な単位。
px は最も基本的で分かりやすいCSS単位です。
ディスプレイ上の「1ドット」を基準とするため、環境に左右されにくく、どの端末でもほぼ同じ見た目になります。
そのため細部のデザイン調整や、見た目を正確に揃えたい場面でよく使われます。
主な用途
アイコンや罫線など、正確にサイズを固定したいとき。
border: 1px solid; のように、境界線や余白の幅を固定するのに最適です。
また、画像やアイコンの大きさ、ボタンの高さなど「絶対的にブレてはいけない部分」にもよく使われます。
こんな時におすすめ
細かい装飾や、サイズが変わると崩れるデザイン。
デザインを1px単位で制御したいときにおすすめです。
特にロゴ・アイコン・仕切り線など、ズレが出ると違和感が大きい要素 には欠かせません。
%（パーセント）
親要素のサイズに対して相対的に決まる単位。
% は、指定した要素の「親要素の大きさ」を基準にサイズを決める単位です。
そのため画面幅に応じて要素が伸縮し、自然にレスポンシブな動きをします。
主な用途
レイアウト全体を親要素に合わせたいとき。
横幅を width: 100%; にすれば、親要素いっぱいに広がる要素 が作れます。
画像やコンテナのサイズを柔軟に調整したいときに便利です。
こんな時におすすめ
スマホやPCなど、画面幅が変わるレイアウト。
レスポンシブデザインに最適です。
画面幅に応じて要素が伸び縮みするため、1つのCSSで複数デバイスに対応 できます。
em（相対単位）
現在の要素のフォントサイズを基準とする相対単位。
CSSでよく使われる単位のひとつが 「em」 です。
この単位は「現在の要素のフォントサイズ」を基準として計算されるため、同じ数値でも親要素の設定によって結果が変わります。
例えば font-size: 16px; の親要素なら 1em = 16px。
親が20pxなら 1em = 20px に拡大されます。
そのため、文字サイズに比例して要素が変化し、全体のデザインに自然な一体感を持たせることができます。
主な用途
文字サイズや余白を「文字の大きさに比例」させたいとき。
emは特に 文字サイズと一緒に余白もスケールさせたい場面 で便利です。
たとえばボタンのパディングを 1em にしておけば、文字を大きくすれば余白も広がり、自然なバランスが保てます。
見出しやリスト項目に使うのも効果的で、テキスト基準のレイアウト設計に向いています。
こんな時におすすめ
ボタンやラベルなど、文字に合わせて大きさが変わるUI。
ECサイトの購入ボタンやフォームのラベルなど、文字サイズを変えると要素の大きさも一緒に変わってほしいUI におすすめです。
多言語サイトのように文字量が変わるケースでも、emを使えば崩れにくく、ユーザーにとって読みやすいデザインを維持できます。
rem（ルート em）
ルート要素（html）のフォントサイズを基準にする相対単位。
rem は「htmlタグで設定されたフォントサイズ」を基準に計算されます。1rem = html の font-size。親要素の影響を受けないため、常に一定の基準で使えます。
主な用途
サイト全体で文字サイズや余白を統一したいとき。
見出しや本文のサイズを rem で指定すれば、基準を変えるだけで全体のバランスを一括調整できます。
スケールの一貫性を保ちたいときに便利です。
こんな時におすすめ
全体のデザインを「同じ縮尺」で整えたいとき。
rem を使えば、全ページで統一感のあるデザイン を作れます。
特に文字サイズや段落間の余白を揃えたいときに有効です。
vh / vw（ビューポート単位）
画面サイズそのものを基準にする単位。
vh / vw は、ブラウザの表示領域（ビューポート）を基準にサイズを決める単位です。100vh は画面の高さ全体、100vw は画面の幅全体を意味します。
主な用途
画面いっぱいに要素を表示したいとき。
ヒーローヘッダー、全画面背景、フルスクリーンのレイアウトなど、「画面全体にフィットさせたい要素」 でよく使われます。
こんな時におすすめ
背景画像やメインビジュアルを画面いっぱいにしたいとき。
スマホでもPCでも、必ず画面全体を覆うレイアウト を作りたい場合におすすめです。
ファーストビューのインパクトを出すときに特に効果的です。
単位の選び方のコツ
CSSの単位は「固定」「相対」「画面基準」の3タイプに分けられます。
組み合わせて使うことで、固定レイアウトにもレスポンシブデザインにも対応できます。
- 固定サイズでずれたくない部分 →
px - 親要素に合わせたい →
% - 文字に比例させたい →
em - 全体で統一感を出したい →
rem - 画面に合わせたい →
vh / vw
