CSSの単位まとめ px em rem %の違いとvw vh clamp calcの使い方まで 現場で迷わない整理術

CSSの単位って、地味に人の性格が出ます。

全部pxで押し切る人。rem推しで宗教戦争を始める人。vwで気持ちよくなった結果、iPhoneで文字が暴れ散らかす人。どれも見てきました。

そしてだいたい、最後に残るのがこの疑問です。「結局、どれを使えばいいの？」

答えは単純じゃない。単純じゃないから面白い。とはいえ、忙しい社会人のあなたに、単位の歴史講義をする気はありません。必要なところだけ拾って、現場で即使える形にまとめます。

px em rem %の基本を押さえつつ、vw vhのクセ、clampとcalcの気持ちいい使いどころ、そして「止める必要がある」地雷運用まで。偏見も混ぜます。実務は偏見で回っているところがあるので。

CSSの単位は何のためにあるのか サイズを決めるため でもそれだけじゃない

単位はサイズの指定に使います。幅、高さ、余白、文字サイズ、境界線、影。全部。

ただ、単位選びは「誰がコントロールできるか」を決める行為でもあります。デザイナーなのか、ユーザーなのか、ブラウザなのか、あなたなのか。

ここがわかると、迷いが減ります。迷いが減ると、余計なCSSも減ります。CSSは放っておくと太る。

単位選びで起きる事故あるある

• 文字を大きくしたいユーザーに優しくない
• 画面が大きいと間延びする 小さいと潰れる
• デザイン通りに見えるのに読みづらい
• コンポーネント化した途端に崩れる

この辺の事故は、だいたい単位とスケールの設計が原因です。あなたのサイト、フォントだけ突然小さくなったりしていませんか？

pxとは 迷ったときの避難所 ただし居住はおすすめしない

pxは絶対長さっぽく見える単位です。扱いやすい。計算しやすい。デザインカンプとも相性がいい。はい、強い。

ただし、pxは「ユーザーの設定に追従しづらい」場面が出ます。特に文字サイズ。ここでpx固定を多用すると、拡大して読んだりする人に刺さります。地味に。

pxのメリット

• 直感的でわかりやすい
• デザインカンプの数値と合わせやすい
• 小さなUI要素の微調整が得意

pxのデメリット

• ユーザーの文字サイズ変更に強く連動しないケースがある
• スケール設計がないと全部がバラバラになりやすい
• 大規模になるほど保守がしんどい

止める必要がある pxで全部やる文化

レイアウトまでpx固定、余白までpx固定、フォントまでpx固定。気持ちはわかる。だが、運用が始まると崩れます。

理由はシンプルで、コンテンツ量と閲覧環境が増えるから。固定は弱い。固定は人間関係でも危険。

emとは 親の影響を受ける単位 便利だが暴れる

emは相対単位です。基本は「その要素のfont-size」を基準にします。つまり、文字サイズを変えると余白も一緒に変わる、みたいな連動が起こせます。

ボタンやタグなど、コンポーネント単位でスケールさせたいときにemは気持ちいい。が、ネストが深いと増幅します。増幅。ここが怖い。

emのメリット

• コンポーネント内部の余白やアイコンサイズを文字に連動できる
• 小さくしたい 大きくしたいが楽

emのデメリット

• ネストすると計算がわからなくなる
• 意図せず大きくなったり小さくなったりする

emが刺さる例 ボタンのpadding

.btn {
  font-size: 1rem;
  padding: 0.6em 1em;
  border-radius: 0.5em;
}
.btn.is-small {
  font-size: 0.875rem;
}

この構成だと、is-smallにしたときpaddingも丸みも自然に縮みます。人間が納得する縮み方。

remとは 全体ルールを作る単位 迷ったらここに寄せる

remはroot em。html要素のfont-sizeを基準にします。つまり、サイト全体のスケールを一発でコントロールできます。

個人的には、実務で一番扱いやすい相対単位がremです。大規模になるほど効きます。小規模でも効きます。万能に近い。

remのメリット

• 基準が1つなので計算が破綻しにくい
• ユーザー設定やアクセシビリティと相性が良い
• デザインシステムに向いている

remのデメリット

• コンポーネント単位でスケールさせたい場合はemの方が楽なこともある
• pxベースのカンプをそのまま書くと変換が面倒

止める必要がある html { font-size: 62.5%; } を脳死で入れる

10px換算で計算が楽になるやつ。昔から人気です。が、チームや案件によっては事故る。

理由は、ブラウザやユーザー設定の前提をいじることになるから。自分の快適さのために、ユーザーの快適さを削るケースが出ます。やるなら意図と合意が必要。

個人的には、htmlのfont-sizeをいじるより、計算やツールで吸収する方が好きです。偏見。

%とは 何に対する割合かを毎回確認する単位

%は相対指定です。幅なら親要素の幅に対しての割合。高さはまた別の罠がある。フォントサイズでも使えるが、扱いは少し古い流派。

レイアウトの横幅で%はまだまだ現役です。containerの幅、カラム、画像の伸縮。ここは得意。

%のメリット

• 親に対して柔軟に伸縮できる
• 流動レイアウトに向く

%のデメリット

• 何を基準にしているか見失いやすい
• 高さの%は親の高さが決まっていないと効かないことがある

止める必要がある height: 100% を連打する

効かない。効かないからさらに100%を足す。親にも足す。祖先にも足す。気づいたらhtml, bodyまで指定している。

その努力、min-height: 100vhで救われることが多いです。か、レイアウト設計から見直す。

vw vhとは ビューポート基準の快楽と副作用

vwはviewport widthの1%。vhはviewport heightの1%。画面サイズに直結するので、レスポンシブが直感的に書けます。

ただし、スマホのvhは歴史的にクセがあります。アドレスバーやツールバーの表示で高さが揺れる。今は改善も進んでいますが、油断するとガタつきます。

vwの使いどころ 余白やタイポのスケール

見出しのサイズを画面幅に合わせて伸ばしたい。ヒーローの余白を気持ちよく動かしたい。そんなときにvwは刺さる。

でもフォントをvwだけで決めると、極端な画面で読めなくなります。そこでclampの出番。

vhの使いどころ ヒーローの高さ ただしsvh dvhも覚える

vhは便利ですが、モバイルで揺れが気になるなら新しいビューポート単位を検討します。

• svh 小さい状態のビューポートに合わせる
• dvh 動的に変化するビューポートに合わせる
• lvh 大きい状態のビューポートに合わせる

ブラウザ対応は確認が必要ですが、モバイルのレイアウト揺れ対策として覚えておく価値はあります。

vw vhのメリット

• 画面サイズに連動するのでレスポンシブが作りやすい
• ヒーローやセクションの設計が直感的

vw vhのデメリット

• 極端な画面サイズで破綻しやすい
• vhはモバイルのUIで揺れることがある

clampとは 伸びるけど暴れない これが欲しかった

clampは、最小値、推奨値、最大値を指定できます。フォントサイズや余白のスケールを、きれいに制限できます。

font-size: clamp(1rem, 2vw + 0.5rem, 2rem);

この指定だと、画面が小さいときは1remを下回らない。大きい画面では2remを超えない。その間は2vw + 0.5remで滑らかに変化。

気持ちいい。こういうのを待っていた。

clampのメリット

• 最小と最大を決められるので読みやすさが守れる
• メディアクエリを減らせる
• タイポグラフィや余白設計が滑らかになる

clampのデメリット

• 値の設計に慣れが必要
• チームでルールがないと数式だらけになる

止める必要がある clampを思いつきで乱用する

全部clampにすると、調整が地獄になります。基準が増えるから。

見出し、リード文、主要な余白など、効きどころを絞る。ここはケチった方が結果的に気持ちいい。

calcとは 混ぜたいときの最後の切り札 便利だが節度がいる

calcは計算できる関数です。単位が違っても足し引きできます。remとvwを混ぜたり、%からpxを引いたり。

width: calc(100% - 2rem);
padding: calc(1rem + 1vw);

こういう指定ができるので、柔軟性が上がります。とはいえcalcは読みづらくなりやすい。人間の脳は括弧を嫌う。

calcのメリット

• 違う単位を組み合わせられる
• レイアウトの微調整や余白設計がしやすい

calcのデメリット

• 数式が増えると保守がしんどい
• 設計意図が伝わらないと改修で壊れる

やり方 単位選びの実務ルール これだけで迷いが減る

ここからは私のやり方。正解は1つじゃないが、事故りにくい道具立てを置いておきます。

ルール1 フォントはremを基本にする

本文、見出し、UIテキストはremベースが扱いやすい。ユーザー設定にも寄りやすい。チームでも統一しやすい。

ルール2 コンポーネント内の余白はemを混ぜる

ボタンやタグなど、文字サイズに連動して縮んでほしい部品にはemが刺さります。remだけだと、文字だけ小さくなって余白が残ることがある。

ルール3 レイアウトは%とmin maxを使って柔らかくする

横幅は%やmax-widthで制御し、無理に固定しない。カードの幅を固定すると、文章の増減で地獄を見る。

ルール4 画面幅に連動したい部分だけvwを使う

ヒーローの余白、見出しの微スケール、背景の飾り。ここだけ。本文にvwを入れたくなったら、一呼吸。

ルール5 clampは見出しに使う まずはそこから

見出しが一番体感効果が大きい。本文までclampするのは、慣れてからでいい。

ルール6 calcは説明できるときだけ使う

自分が説明できないcalcは、未来の自分を刺します。未来の自分はたぶん疲れている。優しくしてあげたい。

単位別の使い分け早見 迷ったらこの順で考える

フォントサイズ

• 基本 rem
• 見出しは clampでスケールもあり
• コンポーネント内の微調整はem

余白 margin padding gap

• 全体設計はrem
• ボタンやラベルなどはemで連動
• セクション間の余白はclampで気持ちよく

幅 高さ

• 幅は%とmax-widthで柔らかく
• ヒーローはmin-height: 100vhまたはsvh dvhの検討
• 固定が必要なアイコンや枠はpxもあり

メリット デザインと実装が仲良くなる

単位設計ができると、カンプと実装が喧嘩しにくくなります。地味に効く。

• レスポンシブで破綻しづらい
• 改修で崩れにくい
• アクセシビリティに寄せやすい
• コンポーネント化しやすい

デメリット ルールがないと混沌になる

px rem em vw clamp calcが混在すると、慣れていないチームでは辛いです。辛いのは、読む人。

• 値の意図が伝わらないと改修で壊れる
• デザインレビューが荒れる
• 似たようなclampが乱立する

だからルールが必要。ルールは縛るためじゃなく、迷いを減らすためにある。

止める必要がある運用パターン これやると後で泣く

パターン1 フォントをvwだけで指定する

大画面で巨大化し、小画面で豆粒になります。読めない。読めないと誰も読まない。

パターン2 pxとremがページごとに思想で変わる

このページだけ余白が広い、このページだけ文字が小さい。ユーザーは気づきます。静かに離脱します。

パターン3 calcが説明不能な暗号になる

暗号は解読されない。未来の自分が投げます。案件なら、他人が投げる。投げたら終わり。

実務で使えるサンプル まずはこの形から始める

ベースのタイポと余白

html {
  font-size: 100%;
}

body {
  font-size: 1rem;
  line-height: 1.7;
}

.section {
  padding-block: clamp(2rem, 3vw, 4rem);
}

.container {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

containerの幅をminで抑え、左右余白は2rem。画面が広すぎても読みやすさが守れます。文章のサイトで効く。

見出しのスケール clamp

h1 {
  font-size: clamp(1.8rem, 2.6vw + 1rem, 3rem);
  line-height: 1.2;
}

h2 {
  font-size: clamp(1.4rem, 1.6vw + 0.9rem, 2.2rem);
  line-height: 1.3;
}

見出しは派手に伸びると気持ちいい。でも最大値で止める。暴れない。

ボタンはemで連動

.btn {
  font-size: 1rem;
  padding: 0.6em 1.1em;
  border-radius: 0.6em;
}

.btn.is-sm {
  font-size: 0.875rem;
}

ボタンは文字サイズで雰囲気が変わるので、emで連動させると人間が納得する縮み方になります。

読者に有益な追加情報 単位と一緒に持っておきたい道具

fluid設計の考え方 文字と余白を同じテンポで動かす

見出しだけclamp、余白は固定。こうすると、画面によってバランスが崩れることがあります。

見出しが伸びるなら、セクション余白も少し伸ばす。カードのgapも少し伸ばす。テンポを揃えると、全体が整います。美しい。

デザインカンプがpxのときの現実的な落とし所

pxカンプをremに変換するのが面倒。あります。

その場合は、フォントと主要な余白だけremに寄せ、細部はpxでもいい。全部を美学で統一しようとして手が止まる方が危険です。納期は待ってくれない。

質問 ここで1つだけ聞きたい

あなたのプロジェクト、単位のルールを誰か言語化していますか？していないなら、今がチャンスです。READMEに2行でいい。

もう1つ質問

フォントサイズを上げたとき、レイアウトは壊れませんか？壊れるなら、単位の選び方と余白の設計を見直すサインです。

単位はただの数値ではありません。サイトの読みやすさ、作りやすさ、そして将来のあなたの睡眠時間に直結します。

睡眠は大事。CSSはほどほどに。