【2026年7月最新】CSSのサイズ指定はどれがいい？px・%・em・rem・vwの違いと使い分け完全ガイド
aikanri-admin
この記事の内容
「CSSでサイズを指定するとき、pxを使えばいいの？それともremの方がいい？」——Web制作の入門者がつまずく典型的な疑問です。
CSSにはpx・%・em・rem・vw・vhなど、サイズ指定のための単位が複数あります。どれを使っても一見同じ見た目になりますが、画面サイズが変わったとき（スマートフォン対応）や、ユーザーがブラウザのフォントサイズを変更したときに、その違いが顕著に現れます。
この記事では、CSSサイズ指定の主要単位を全て比較し、「どの場面でどれを使うか」という判断基準を明確に解説します。さらに後半では、Claude CodeにCSSを書かせる方法も紹介します。
代表菅澤
AI鬼管理山崎
01 UNIT TYPES CSSの単位——「絶対値」と「相対値」の2種類を理解する 全ての単位はこの2分類に入る。まずここを理解する
📚 用語解説
CSS（Cascading Style Sheets）：Webページの見た目（色・サイズ・レイアウト・フォント）を定義するスタイルシート言語。HTMLが「構造」を担うのに対し、CSSは「見た目」を担う。すべてのWebサイトの視覚的なデザインは、CSSで制御されている。
CSSのサイズ指定単位は大きく「絶対値」と「相対値」の2種類に分けられます。
| 分類 | 意味 | 代表的な単位 | 特徴 |
|---|---|---|---|
| 絶対値 | 固定された大きさ。画面サイズに依存しない | px（ピクセル） | 常に同じサイズで表示される |
| 相対値 | 基準となる値からの相対的な大きさ | %・em・rem・vw・vh | 画面・親要素・ルートフォントに連動して変化する |
「相対値が良い・絶対値が悪い」ではありません。それぞれに適切な使いどころがあり、使う場面によって使い分けるのが正しいアプローチです。
📚 用語解説
レスポンシブデザイン：PC・タブレット・スマートフォンなど、異なる画面サイズのデバイスで適切に表示されるWebデザイン。現在のWebサイトはスマートフォンからのアクセスが過半数を占めるため、レスポンシブ対応は実質的に必須。相対値（%・rem・vw等）を使うとレスポンシブ対応が容易になる。
特に近年重要なのがレスポンシブデザインへの対応です。2026年現在、Webサイトへのアクセスの60〜70%はスマートフォンからです。pxで全て固定サイズにしてしまうと、スマホで見たとき文字が小さすぎてズーム必須になるサイトになってしまいます。
02 PX px——固定サイズ指定の基本と正しい使いどころ 最も直感的な単位と、使うべき場面・避けるべき場面
📚 用語解説
px（ピクセル）：Webサイトを表示するモニターの「点（ドット）」の数を基準にしたサイズ指定。1pxは基本的に画面の1ドットに相当。物理的に固定されたサイズのため、画面サイズや親要素のサイズに影響されない「絶対値」として動作する。最も直感的でわかりやすい単位。
pxは「何px＝何センチ」という直感的な変換はできませんが、「指定した数値通りのサイズで必ず表示される」という予測可能性が最大の強みです。
2-1. pxが向いている用途
2-2. pxを避けるべき場面
フォントサイズ（font-size）にpxを使うことには注意が必要です。多くのブラウザではユーザーがデフォルトのフォントサイズを設定できますが、pxで固定すると、そのユーザー設定が無視されます。視覚障害のあるユーザーがフォントを大きく設定していても、pxで固定すると効かないため、アクセシビリティの問題になります。
body・p・h1などのテキスト要素のfont-sizeにpxを使うと、ブラウザのフォントサイズ設定を上書きしてしまいます。アクセシビリティ（利用しやすさ）を考慮すると、フォントサイズはremを使う方が正しい設計です。
pxは「常に同じサイズで表示したいもの」に使う。具体的には「枠線・シャドウ・アイコン・メディアクエリのブレークポイント指定」。テキスト・レイアウト要素のサイズには相対値（rem・%）を使う方が、より柔軟でアクセシブルなサイトになります。
03 PERCENTAGE %（パーセント）——親要素を基準にした相対指定 親要素に依存するため「コンテナの中で割合を決める」ときに使う
📚 用語解説
%（パーセント）：親要素のサイズを100%として、その何%のサイズにするかを指定する相対単位。「width: 50%」と書くと親要素の幅の半分になる。親要素のサイズが変わると自動的に追従するため、レスポンシブレイアウトで非常に便利。
%はその名の通り「親要素の何パーセント」というサイズを指定します。例えば：
/* 親要素（.container）の幅に応じて自動調整 */
.container {
width: 1200px; /* 固定幅の親コンテナ */
}
.half-width {
width: 50%; /* 常に親の50%＝600px */
}
/* 画面サイズに応じて変化 */
.full-width {
width: 100%; /* 常に親要素の幅いっぱい */
}3-1. %が向いている用途
3-2. %の落とし穴——高さ指定には注意
height（高さ）に%を指定するのは注意が必要です。height: 50%は「親要素の高さの50%」ですが、親要素の高さが明示的に指定されていないと無効になるケースがあります。
height: 100%を指定しても有効にならない場合、原因は親要素・さらに上の親要素に高さが指定されていないことがほとんどです。htmlとbodyにも「height: 100%」を指定することで解決できます。
AI鬼管理山崎
04 EM em——フォントサイズを基準にした相対指定と落とし穴 強力だが「積み重なり（複合）」に注意が必要な単位
📚 用語解説
em：現在の要素または親要素のfont-size（文字サイズ）を1emとして、それの倍数でサイズを指定する相対単位。「1em = 現在のfont-size」なので、font-size: 16pxの要素では1em = 16px、2em = 32pxになる。テキストに関連するサイズ（行間・余白）の指定に適している。
emは「文字サイズに比例したサイズ指定」に向いています。例えば「文字サイズが変わっても、行間や余白が文字に追従してほしい」というケースです：
p {
font-size: 16px;
line-height: 1.6em; /* 16px × 1.6 = 25.6px の行間 */
padding: 1em; /* 16px × 1 = 16px の内側余白 */
}
/* font-sizeが変わっても比率は保たれる */
.large-text {
font-size: 24px;
line-height: 1.6em; /* 24px × 1.6 = 38.4px の行間（自動追従） */
}4-1. emの落とし穴——「複合」による予期せぬサイズ変動
emの最大の問題点は、ネスト（入れ子）構造で複合することです。
/* body: 16px */
body { font-size: 16px; }
/* .parent: 1.5em = 16 × 1.5 = 24px */
.parent { font-size: 1.5em; }
/* .child: 1.5em = 24 × 1.5 = 36px ← 意図せず大きくなる */
.child { font-size: 1.5em; }
/* .grandchild: 1.5em = 36 × 1.5 = 54px ← さらに大きくなる */
.grandchild { font-size: 1.5em; }「font-sizeに1.5emを指定しただけなのに、入れ子が深いと文字が爆発的に大きくなる」という問題です。この「複合」のせいで、font-sizeの指定にemを使うのは避けた方が良いとされています。
font-sizeにはremを使い、paddingとline-heightにemを使うのが現代のCSS設計のベストプラクティスです。「テキストのサイズに連動した余白・行間」はemで、「ページ全体の文字サイズ基準」はremで管理します。
05 REM rem——ルート要素を基準にした最もシンプルな相対指定 emの複合問題を解決した「現代のデファクトスタンダード」
📚 用語解説
rem（Root EM）：ルート要素（html要素）のfont-sizeを1remとして指定する相対単位。ブラウザのデフォルトは16px（html { font-size: 16px; }）なので、1rem = 16px。emとの違いは「親要素ではなくhtmlの指定を基準にする」点。ネストしても複合しないため、emより予測可能性が高い。
remが現代CSSの「デファクトスタンダード」として普及した理由は、「入れ子が深くなっても常にhtml要素のfont-sizeを基準にする」ため、複合問題が起きないことです。
/* html要素のfont-sizeを基準値として設定 */
html {
font-size: 16px; /* 1rem = 16px */
}
/* 入れ子が深くなっても同じ基準 */
.parent { font-size: 1.5rem; } /* 16 × 1.5 = 24px */
.child { font-size: 1.5rem; } /* 16 × 1.5 = 24px（複合しない！） */
.grandchild { font-size: 1.5rem; } /* 16 × 1.5 = 24px（同じ） */5-1. remの使いどころ
5-2. remと62.5%テクニック
html { font-size: 62.5%; }（=10px）と設定する「62.5%テクニック」が広く使われています。これにより1rem = 10pxになり、「1.6rem = 16px」「2.4rem = 24px」と計算しやすくなります。
/* 62.5%テクニック：1rem = 10px にする */
html {
font-size: 62.5%; /* デフォルト16px × 62.5% = 10px */
}
body {
font-size: 1.6rem; /* 10 × 1.6 = 16px */
}
h1 {
font-size: 3.2rem; /* 10 × 3.2 = 32px */
}
/* pxで考えてremで書けるので直感的 */html要素に基準font-sizeを設定→全フォントサイズをremで指定→余白・行間はemで指定→幅はmax-width + %またはvwで指定——この設計パターンを使うと、一箇所（html font-size）を変えるだけで全体のスケール変更が可能になります。
代表菅澤
06 VW VH vw・vh・その他の単位——ビューポート基準の指定 画面サイズそのものを基準にする強力なモダン単位
📚 用語解説
vw・vh（ビューポート単位）：vwはViewport Width（表示エリアの幅）の1%、vhはViewport Height（表示エリアの高さ）の1%を意味する単位。ブラウザウィンドウのサイズそのものを基準にするため、画面全体に対しての比率でサイズを指定できる。レスポンシブデザインで非常に有用。
vw/vhは「ブラウザの表示エリア（ビューポート）」を基準にします：
| 単位 | 意味 | 使用例 |
|---|---|---|
| vw | Viewport Width の1% | 100vw = 画面幅いっぱい |
| vh | Viewport Height の1% | 100vh = 画面高さいっぱい |
| vmin | vwとvhの小さい方 | 画面の短辺を基準にしたい場合 |
| vmax | vwとvhの大きい方 | 画面の長辺を基準にしたい場合 |
6-1. vhの典型的な使いどころ
vhの最もよく使われるケースは「画面全体を覆うヒーロー（FV）セクション」です：
/* ファーストビューを画面高さいっぱいに表示 */
.hero-section {
height: 100vh; /* 画面の高さ100% */
width: 100%;
background-color: #1a1a1a;
display: flex;
align-items: center; /* 縦方向に中央揃え */
}
/* スマホのアドレスバーを考慮した指定 */
.hero-section {
height: 100svh; /* 新しい単位：アドレスバー含む実際の高さ */
}6-2. vwの使いどころと注意点
vwはテキストのサイズ指定にも使えます。「fluid typography（流体タイポグラフィ）」と呼ばれる技法で、画面サイズに完全に連動したフォントサイズを実現できます：
/* clamp()を使ったfluid typography */
h1 {
/* 最小16px、最大48px、画面幅に応じて変化 */
font-size: clamp(1rem, 5vw, 3rem);
}100vwはスクロールバーの幅を含む場合があり、スクロールバーが表示されると横スクロールが発生することがあります。幅の指定には100vwより100%を優先し、vwは特殊なケースのみ使用することをおすすめします。
07 QUICK REFERENCE 単位の使い分け早見表——プロが選ぶ場面別推奨 どのプロパティに何を使うかを表で一気に整理する
「結局どれを使えばいいの？」という疑問に答える早見表です。
| CSSプロパティ | 推奨単位 | 理由 |
|---|---|---|
| font-size（文字サイズ） | rem | ブラウザ設定に追従、複合しない |
| line-height（行間） | em または 単位なし | 文字サイズに連動した行間 |
| padding・margin（余白） | rem または em | rem：ページ全体統一、em：文字サイズ連動 |
| width（幅） | % または vw | 親要素・画面幅に連動するレスポンシブ対応 |
| height（高さ） | vh またはauto | 画面高さ基準・コンテンツ依存 |
| max-width（最大幅） | px または rem | 固定レイアウトのコンテナに |
| border（枠線） | px | 細線は常に1px固定が正確 |
| box-shadow | px | 影の大きさは固定値が直感的 |
| メディアクエリ | em または px | em推奨（ブラウザズームに対応） |
7-1. プロが使う単位の「優先順位」
（最も安全・汎用）
→%かvw/vh
→em
→px
迷ったらremから始めることをお勧めします。remは「htmlのフォントサイズを基準にした絶対値に近い相対値」として機能し、予測可能で保守しやすいCSSを書けます。
AI鬼管理山崎
08 COMMON MISTAKES 初心者がやりがちなCSS単位の失敗パターンと正しい書き方 「なぜか崩れる」の7割はここが原因
CSSのサイズ指定でよく起きる「なぜかレイアウトが崩れる」「スマホで文字が小さすぎる」という問題の大半は、単位の使い方に原因があります。代表的な失敗パターンを確認しましょう。
8-1. 全てpxで書いてしまうパターン
「固定の数値が安心」という理由でfont-sizeもwidthも全てpxで書いてしまう失敗です。スマートフォンで見たとき、テキストが極小で読めないサイトになります。
/* NG: 全てpx固定 */
body { font-size: 16px; }
.container { width: 1200px; } /* スマホでははみ出す */
/* OK: 相対値を活用 */
html { font-size: 62.5%; } /* 1rem = 10px */
body { font-size: 1.6rem; } /* 16px相当 */
.container { max-width: 1200px; width: 100%; } /* 画面に収まる */8-2. emを入れ子に使って文字が爆発するパターン
「emを使えばレスポンシブ対応できる」と聞いて、font-sizeにemを使ったら入れ子になった要素の文字が想定外に大きくなった、という失敗です。
/* NG: font-sizeにemを使ってネストした場合 */
.parent { font-size: 1.5em; } /* 16 × 1.5 = 24px */
.child { font-size: 1.5em; } /* 24 × 1.5 = 36px ← 複合！ */
.grandchild { font-size: 1.5em; } /* 36 × 1.5 = 54px ← 大きすぎ */
/* OK: font-sizeにはremを使う */
.parent { font-size: 1.5rem; } /* 常に 16 × 1.5 = 24px */
.child { font-size: 1.5rem; } /* 常に 16 × 1.5 = 24px */
.grandchild { font-size: 1.5rem; } /* 常に 16 × 1.5 = 24px */8-3. heightに%を使って高さが効かないパターン
「height: 50%で親要素の半分の高さにしたい」と書いたのに、全く効かないケースです。
/* NG: 親要素の高さが未指定だとheight: %が効かない */
.parent {
/* heightの指定なし */
}
.child {
height: 50%; /* 効かない！ */
}
/* OK: 親要素に高さを指定する */
.parent {
height: 400px; /* または height: 100vh */
}
.child {
height: 50%; /* 400px × 50% = 200px */
}
/* または: vhを使う */
.child {
height: 50vh; /* 画面高さの50% */
}(1) 親要素にheightが指定されているか確認 / (2) 親要素の親（祖先）も確認 / (3) htmlとbodyにheight: 100%が必要な場合もある / 迷ったらheightにはvhを使う方が確実。
8-4. vwで横スクロールが出るパターン
width: 100vwを使ったら、右に少し横スクロールが出てしまった、という問題です。vwはスクロールバーの幅を含むため、コンテンツ幅に使うと微妙にはみ出します。
/* NG: vwはスクロールバーの幅も含む場合がある */
.full-width {
width: 100vw; /* スクロールバー分だけはみ出すことがある */
}
/* OK: 横幅には100%を使う */
.full-width {
width: 100%; /* 親要素の幅 = はみ出さない */
}📚 用語解説
スクロールバーの幅問題（vw）：WindowsブラウザではスクロールバーがWebページのコンテンツ幅の内側に表示されるため、width: 100vwがスクロールバーの幅（通常15〜20px）を超えて横スクロールが発生することがある。横幅のレイアウトにはwidth: 100%を使い、vwは縦方向やフォントサイズなど特定の用途に限定するのが無難。
8-5. メディアクエリのブレークポイント指定
メディアクエリのブレークポイント指定にはpxとemの両方が広く使われます。emで書くとブラウザのズームに対してより正確に動作しますが、どちらも有効な選択です。
| 指定方法 | サンプル | 特徴 |
|---|---|---|
| px指定 | @media (max-width: 768px) | 直感的でわかりやすい。最も普及している |
| em指定 | @media (max-width: 48em) | ブラウザのズームレベルに正確に対応する |
チームのコーディング規約に合わせるのが最善。個人プロジェクトではpx指定が直感的で読みやすい。アクセシビリティを厳格に求められるサービスではem指定が推奨。
09 CLAUDE VS HANDWRITTEN 【比較】CSS手書き vs Claude Code——Webサイト制作の最短ルート CSS単位の知識はあっても「書く」必要はない時代になった
ここまでCSS単位の使い分けを解説しましたが、実際のWebサイト制作では「Claude CodeにCSSを書かせる」という選択肢が現実的になっています。
| 比較軸 | CSS手書き | Claude Codeで生成 |
|---|---|---|
| 学習コスト | 高（px/em/rem/vw/flexbox/grid等の習得が必要） | 低（日本語でデザインを説明するだけ） |
| 制作速度 | 遅（書く→確認→修正を繰り返す） | 速（一発でほぼ完成形が出ることも） |
| 品質 | 熟練度による | 現代的なベストプラクティスを踏まえたコードが出る |
| カスタマイズ | 自由度が高い | コードを読んで修正できれば自由 |
| トラブル時 | 自力でデバッグ | Claude Codeに「このCSSが効かない」と相談する |
「CSS単位の知識は必要ないのか？」という疑問への答えは：「生成されたコードを読む最低限の理解は必要」です。Claude Codeが出力したCSSを確認し、意図通りに動いているかをチェックするためには、px・rem・%の基礎は知っておく価値があります。
8-1. Claude CodeへのCSS依頼の実践例
実際のClaude Codeへのシンプルなお願いパターン：
を日本語で説明
コードを生成
「ここを直して」と相談
弊社GENAIのWebサイト制作も、このフローで進めています。デザイナーの指示をClaude Codeに伝え、生成されたCSSを確認・微調整するサイクルで、制作工数が従来の1/3程度になりました。CSS単位の深い知識がなくても、「何か変だ」と気づく読み取り力があれば十分機能します。
代表菅澤
NEXT STEP
この記事の内容を、あなたのビジネスで
実践してみませんか？
AI活用を自社で回せるようになりたい方へ
AI鬼管理
Claude Code・Cowork導入支援から業務設計・社内浸透まで実践ベースで伴走。「自社で回せる組織」を90日で作る経営者向けトレーニング。
よくある質問
Q. CSSのサイズ指定でpxとremはどう使い分ければいいですか？
A. シンプルなルール：テキスト（font-size）や余白（padding/margin）にはremを使い、枠線（border）や細かい固定サイズにはpxを使います。remを使うとブラウザのフォントサイズ設定に追従するため、アクセシビリティが向上します。px固定だとユーザーのフォント設定が無視されてしまいます。
Q. emとremの違いは何ですか？
A. emは「現在の要素（または親要素）のfont-sizeを基準」にする単位です。remは「html要素のfont-size（ルート要素）を基準」にします。emを入れ子の要素に使うと、サイズが複合して予期せず大きくなる問題があります。remはhtml要素だけを基準にするので複合しません。現代のCSS設計では、font-sizeにはremを使うのが推奨です。
Q. スマホ対応（レスポンシブ）にするにはどの単位を使えばいいですか？
A. レスポンシブデザインでは%・rem・vw・vhを中心に使います。幅（width）には%かvwを使うと画面サイズに追従します。テキストサイズはremで指定し、画面サイズ別にmedia queryで調整します。pxはborderなど固定が必要な細部のみ使い、大きなレイアウトやテキストには相対値を使うのが基本方針です。
Q. CSSが苦手でもWebサイトを作れますか？
A. はい、Claude Codeを使えば可能です。「こんなデザインにしたい」を日本語で説明すると、CSSコードを生成してくれます。CSS単位の深い知識がなくても、生成されたコードをブラウザで確認して「ここが違う」を伝え直すサイクルで、プロ品質のWebサイトが作れます。弊社でもこのアプローチでLP制作工数を大幅削減しています。
Q. vwとvhはいつ使うのが適切ですか？
A. vhはファーストビュー（画面全体を覆うヒーローセクション）の高さ指定（height: 100vh）に最もよく使われます。vwは「画面幅に連動したフォントサイズ」や「画面幅を完全に使うレイアウト」に便利です。ただしvwはスクロールバーの幅を含む問題があるため、横幅には100%の方が安全なケースも多いです。
Q. CSSのfont-sizeにpxを使うのはなぜ良くないのですか？
A. ブラウザにはユーザーがデフォルトフォントサイズを設定できる機能があります（高齢者や視覚が弱い方が文字を大きくするためなど）。しかしfont-sizeにpxを固定値で指定すると、この設定が上書きされて無視されます。remで指定するとブラウザの設定に追従するため、より多くのユーザーが使いやすいサイトになります。これはWebアクセシビリティのガイドラインでも推奨されています。
Claude Codeで業務自動化を90日で叩き込む
経営者向けの伴走型パーソナルトレーニング
Claude Code を業務に落とし込む
専門研修コース一覧
受講者本人の業務を題材に、「使いこなせる」状態になるまで伴走する研修プログラム。1対1特化型・ハンズオン・法人講座の3コースを展開中。業務特化・実装まで踏み込むタイプのClaude Code研修です。
研修コース一覧を見る →AI鬼管理へのお問い合わせ
この記事を読んで気になった方へ。
AI鬼管理の専門スタッフが、御社に最適な
業務自動化プランを無料でご提案します。
- AI業務自動化サービス「AI鬼管理」を運営 — Claude Code を活用し、経営者の業務を「AIエージェントに任せる仕組み」へ転換するパーソナルトレーニングを 伴走構築 で提供。日報・採用・問い合わせ対応・経費精算・議事録・データ集計・営業リスト等の定型業務を、AIに代行させる体制を経営者と一緒に作り込む
- Claude Code 実装ノウハウを 経営者・法人クライアント に直接指導。生成AIを「便利ツール」ではなく 「業務を任せる存在」 として運用する手法を体系化
- 「やらせ切る管理」メソッドの開発者。シンゲキ株式会社（2021年設立・鬼管理専門塾運営）にて累計3,000名以上の学習者を志望校合格に導いた管理メソッドを、AI × 経営者支援 に転用
- 著書『3カ月で志望大学に合格できる鬼管理』(幻冬舎)、『親の過干渉こそ、最強の大学受験対策である。』(講談社)
- メディア出演: REAL VALUE / カンニング竹山のイチバン研究所 / ええじゃないかBiz 他
- 明治大学政治経済学部卒
