CSS単位の種類

CSSには絶対単位と相対単位があり、用途で使い分けます。

絶対単位

単位内容用途
pxピクセル（CSSピクセル）UIの細かい調整
ptポイント（1/72インチ）印刷向けCSS
inインチ印刷物
cm / mmセンチ・ミリ印刷物

相対単位

単位基準用途
%親要素のサイズwidth / height
em親要素のフォントサイズmargin / padding（その要素基準）
remルート（html要素）のフォントサイズレスポンシブ全般・推奨
vwビューポート幅の1%フルスクリーン要素
vhビューポート高さの1%ヒーローセクション
vmin / vmaxvw/vhの小さい/大きい方縦横を意識しないレイアウト
ch”0”文字の幅文字数ベースの幅
ex”x”文字の高さフォント高さの調整

px → rem 変換早見表（ルート16px基準）

rem = px ÷ ルートフォントサイズ

ブラウザのデフォルトルートフォントサイズは16pxなので、

rem = px ÷ 16
pxrem用途例
1px0.0625remボーダー
2px0.125rem細いボーダー
4px0.25rem細かい余白
6px0.375rem小さいパディング
8px0.5remパディング
10px0.625rem小フォント
12px0.75remキャプション
14px0.875rem補助テキスト
16px1rem基準・本文
18px1.125remやや大きいテキスト
20px1.25remリード文
24px1.5remh3
28px1.75remh2
32px2remh1（小）
40px2.5remh1
48px3remヒーロー見出し
64px4rem巨大見出し
80px5remランディング用
96px6rem装飾的見出し

px → em 変換

emは親要素のフォントサイズが基準。同じ値でも親要素によって意味が変わります。

em = 子要素の絶対サイズ ÷ 親要素のフォントサイズ

例: 親が18pxで、子要素を24pxにしたい場合

24 ÷ 18 ≒ 1.333em

emの注意点（ネスト）

<ul style="font-size: 1.5em">
  <li>
    <ul style="font-size: 1.5em">  <!-- 1.5 × 1.5 = 2.25em の見た目 -->
      <li>
        <ul style="font-size: 1.5em">  <!-- 1.5 × 1.5 × 1.5 = 3.375em -->

親要素にem指定するとネストするたびに掛け算され、意図しない大きさに。フォントサイズはremが安全。

rem vs em 使い分け

用途推奨
グローバルなフォントサイズrem
余白・ボーダー・幅rem
自身のフォントサイズに連動した余白（ボタン内側など）em
メディアクエリ（ブレークポイント）em
アイコンサイズ（テキストと同じ大きさ）em
/* ボタンのpaddingはフォントサイズに連動させる */
.button {
  font-size: 1rem;
  padding: 0.5em 1em;  /* ボタンの文字サイズに比例 */
  border-radius: 0.25em;
}

.button-large {
  font-size: 1.5rem;   /* paddingも自動でスケール */
}

% の使いどころ

.modal {
  width: 90%;
  max-width: 600px;
}

%は親要素を基準にします。

プロパティ基準となる親の何か
width / max-width親の width
height / max-height親の height
padding / margin親の width（縦方向のpaddingも！）
top / bottom親の height
left / right親の width
font-size親の font-size

paddingやmarginを%で指定すると縦方向も親のwidth基準になる点が罠。

vw / vh の使いどころ

ビューポート（画面）サイズに対する相対値。

.hero {
  height: 100vh;        /* 画面の高さ全部 */
  font-size: 5vw;       /* 画面幅に応じてスケール */
}

モバイルの100vh問題

iOSのSafariで height: 100vh を指定すると、URLバーの高さ分はみ出す問題があります。新しいブラウザでは以下を使うと解決：

.hero {
  height: 100dvh;  /* dynamic viewport height */
  /* または */
  height: 100svh;  /* small viewport height */
  height: 100lvh;  /* large viewport height */
}
単位内容
vhURLバーが縮んだ最大状態
dvhURLバーの状態に応じて変動
svhURLバー最大時の高さ（小さい方）
lvhURLバー最小時の高さ（大きい方）

clamp() で柔軟なサイズ指定

レスポンシブデザインに便利な clamp() 関数：

font-size: clamp(1rem, 2vw + 0.5rem, 2rem);
/*         最小   推奨               最大  */

これは「ビューポート幅に応じて2vw + 0.5remになるが、1remを下回らず2remを超えない」という指定。

よく使うレスポンシブfont-size

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
body { font-size: clamp(1rem, 1.2vw + 0.7rem, 1.125rem); }

レスポンシブ設計のコツ

1. ルートフォントサイズを基準にする

:root {
  font-size: 16px; /* デフォルト */
}

@media (max-width: 768px) {
  :root {
    font-size: 14px; /* モバイルで全体縮小 */
  }
}

remで書いた要素は全部一括縮小されます。

2. ブレークポイントはem単位

@media (min-width: 48em) { /* = 768px */
  /* タブレット以上 */
}

@media (min-width: 64em) { /* = 1024px */
  /* デスクトップ */
}

ブラウザの「文字サイズ拡大設定」を使う場合、emで書いておくとユーザーの設定変更に追従します。

3. ボーダーだけpx、それ以外はrem

.card {
  padding: 1rem;
  border: 1px solid #ccc;  /* ボーダーはpxで固定 */
  border-radius: 0.5rem;
}

4. アイコンサイズはem

.icon {
  width: 1em;
  height: 1em;
}

.button {
  font-size: 1.25rem;
}
.button .icon {
  /* 親のfont-sizeに連動して 1.25rem になる */
}

印刷用CSS

@media print {
  body {
    font-size: 12pt;  /* 印刷物はpt単位が読みやすい */
  }
  .container {
    width: 18cm;      /* A4幅−余白 */
  }
}

デザインカンプとCSSの単位

Figma・Sketch等のデザインカンプはpx指定が多いですが、コーディング時にrem変換するとユーザーの文字サイズ設定に対応できます。

一括変換のCSS変数戦略

:root {
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
}

.card {
  padding: var(--space-4);
  margin-bottom: var(--space-6);
}

まとめ

  • フォント・余白はrem、自身連動の余白はem、固定UIはpx
  • 1rem = 16px が基準、12px = 0.75rem
  • ブレークポイントはem単位でユーザー設定に追従
  • レスポンシブは**clamp()**で最小・推奨・最大を一発指定

関連ツール: px・rem・em変換ツール ではpx・rem・em・%・ptを相互変換できます。ルートフォントサイズも変更可能なので、デザインカンプから実装値への変換にぜひご活用ください。