CSSの単位とは？px・%・em・remの違いと使い分けを初心者向けに解説

2026年8月28日2026年10月9日

CSSで文字や幅を指定するとき、px・%・em・remのどれを選ぶか迷うことがあります。同じ数値でも単位によって大きさが変わるのは、計算の基準が違うためです。

選ぶ手がかりは、何に合わせて大きさを変えたいかです。親の幅に合わせるのか、部品の文字に合わせるのか、ページ全体の文字サイズに合わせるのかを考えると、使い分けが整理できます。この記事では、この関係を「連動」と呼びます。

CSSを書き始めた方に向けて、4つの基準を図とコードで比べます。読み終えたら、練習用のカードで幅や余白を一つずつ変え、どこが変わるかを確かめられます。CSSの書く位置から復習したい方は、CSSの基本的な書き方も先に確認してください。

この記事で分かること

CSSで単位を書く理由と、単位を省略できる場合
px・%・em・remが基準にする場所
emの入れ子とremの違い
4単位を使ったカードを保存し、表示を確かめる方法
単位を指定しても反映されないときの確認順

CSSの単位とは

CSSの単位は、数値が表す大きさの基準をブラウザーへ伝える記号です。たとえば、同じ20でも20pxと20%では、ブラウザーが参照する基準が異なります。

.sample {
  font-size: 20px;
  width: 80%;
  padding: 1em;
  margin-bottom: 1rem;
}

CSSの単位は、数値を「何を基準に、どれだけの大きさにするか」へ変える目盛りです。 px・em・remは長さの単位です。%は長さそのものではなく、基準に対する割合を表します。幅や文字サイズを相対的に指定するときによく使うため、この記事では4つをまとめて比較します。

CSSの値には長さ以外にも、角度のdegや時間のsなどがあります。この記事では、初心者が文字サイズ・幅・余白で目にしやすい4つに絞ります。値と単位の全体像は、MDNのCSSの値と単位で確認できます。

単位が必要な値と省略できる値

長さを表す0以外の数値は、基本的に20pxや1.5remのように単位まで書きます。数値と単位の間へ空白は入れません。

.valid {
  width: 240px;
  margin-top: 1.5rem;
}

.invalid {
  width: 240;
  margin-top: 1.5 rem;
}

一方、長さが0ならmargin: 0;のように単位を省略できます。また、font-weight: 700;やline-height: 1.5;のように、プロパティが単位なしの数値を受け付ける場合もあります。「数値には必ず単位」ではなく、そのプロパティが受け付ける値を確認することが大切です。

px・%・em・remの比較

4つの違いを理解する近道は、値の大きさだけでなく「どこを基準に計算するか」を見ることです。

pxはCSSの基準ピクセル、%は指定先ごとの基準、emは文字サイズ、remはhtmlの文字サイズを参照する。

単位	大きさを決める基準	最初に向く場面
`px`	CSS上の基準ピクセル	`1px`の枠線、固定寸法のアイコン、変化を確かめる練習
`%`	プロパティごとに定められた基準	親の領域に合わせる幅、親に合わせる文字サイズ
`em`	要素の文字サイズ。`font-size`自身では継承された親の文字サイズ	ボタンなど、文字と一緒に拡大したい内側余白
`rem`	ルート要素、通常は`html`の文字サイズ	ページ全体の文字サイズ、共通の余白基準

単位の正解は一つではなく、「何に連動させたいか」で選びます。連動が不要ならpx、親の領域なら%、部品の文字ならem、ページ全体の基準ならremという順で考えると整理しやすくなります。

px・em・remの定義と、0なら単位を省略できることは、MDNの<length>で確認できます。

HOAI Point

コードを書く前に、数値を先に決めるのではなく、「この大きさは何と一緒に変わってほしいか」を先に決めてください。 基準が決まれば、4つの候補から選びやすくなります。

pxの基準と使い方

pxは、親領域の幅や文字サイズを基準にせず、指定したCSSピクセル数で長さを表す単位です。CSSでは「絶対長」に分類されます。

.icon {
  width: 24px;
  height: 24px;
}

.panel {
  border: 1px solid #536048;
}

24pxのアイコンや1pxの枠線のように、別の基準へ連動させる必要がない寸法はpxで理解しやすく書けます。値を変えた結果も予想しやすいため、CSSを学び始めたときの練習にも向きます。

CSSピクセルと画面の点の違い

CSSの1pxは、ディスプレイの物理的な点1個と常に同じではありません。高解像度の画面では、CSSの1pxを、画面を構成する複数の細かな点（デバイスピクセル）で描くことがあります。そのため、pxを定規のミリメートルのような物理サイズとして考えないでください。

また、pxを使うこと自体が誤りというわけではありません。ただし、本文の文字サイズをすべてpxだけで固定すると、ユーザーの文字サイズ設定へ連動しにくくなる場合があります。文字やページ全体の余白では、remなどの相対単位も検討します。

%の基準と使い方

%は、別の量に対する割合を表します。50%なら、基準となる量の半分です。ただし、何を基準にするかはプロパティごとに決まります。

次のHTMLでは、.containerの内側に.cardを置きます。続くCSSをこの親子関係へ適用する例です。

<div class="container">
  <div class="card">親の幅の半分</div>
</div>

.container {
  width: 800px;
}

.card {
  width: 50%;
}

この例の.cardは、幅の計算基準となる親領域が800pxなら400pxになります。CSSでは、この基準となる領域を「包含ブロック」と呼びます。widthのパーセント値は、その包含ブロックの幅を基準にします。

文字サイズの例では、.parentの内側に.childを置きます。

<div class="parent">
  <p class="child">子の文字</p>
</div>

.parent {
  font-size: 20px;
}

.child {
  font-size: 150%;
}

一方、font-size: 150%;は親要素の文字サイズを基準にします。この例では20pxの150%なので30pxです。

%を見たら、「何の50%か」をプロパティごとに確認します。「常に親要素の幅」と覚えると、font-sizeや高さなどで混乱します。

割合の構文はMDNの<percentage>、widthの基準はMDNのwidthプロパティで確認できます。

HOAI Point

%で想定外の大きさになったときは、数値を何度も変える前に、そのプロパティが何を100%としているかを確認します。 基準が違えば、50%を40%にしても根本的な理解は直りません。

emの基準と使い方

emは、文字サイズに連動する相対単位です。ここで初心者が迷いやすいのは、font-size自身へ使う場合と、余白などほかのプロパティへ使う場合で基準が変わることです。

文字サイズと余白で異なるemの基準

文字サイズの例では、.parentの内側に.childを置きます。

<div class="parent">
  <p class="child">子の文字</p>
</div>

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.2em;
}

font-size: 1.2em;は、親から継承した20pxを基準にするため24pxになります。

.button {
  font-size: 20px;
  padding: 0.75em 1.25em;
}

このpaddingのemは、.button自身に最終的に適用された文字サイズ20pxが基準です。CSSの指定や継承を反映した後の文字サイズを「計算済み文字サイズ」と呼びます。上下は15px、左右は25px相当です。

font-sizeに書くemは継承された親の文字サイズ、それ以外のプロパティに書くemはその要素自身の計算済み文字サイズが基準です。この違いを知ると、同じ1emでも結果が変わる理由を説明できます。

文字と一緒に内側余白も拡大したいボタンやラベルでは、emが役立ちます。文字サイズを変えると余白も同じ比率で変わり、部品内のバランスを保ちやすくなります。

HOAI Point

emはサイト全体の基準をそろえるためではなく、一つの部品の文字と余白を一緒に拡大・縮小したいときに使うと役割が明確です。

入れ子にしたemの計算

font-sizeへemを使った要素を入れ子にすると、親で計算された文字サイズが次の基準になります。

<ul class="menu">
  <li>親の項目
    <ul class="menu">
      <li>子の項目</li>
    </ul>
  </li>
</ul>

.menu {
  font-size: 1.2em;
}

htmlと外側のリストの親が16pxで、途中のliに別の文字サイズ指定がないとすると、外側の.menuは19.2px、内側は19.2pxの1.2倍で23.04pxです。親で大きくなった文字サイズを子がもう一度基準にするため、この1.2emの例では、入れ子が深いほど文字が大きくなります。これをemの「累積」と呼びます。

htmlと外側の親が16pxの例。1.2emの外側は19.2px、内側は23.04px。1.2remは外側も内側も19.2px。

意図して部品を段階的に変えるなら問題ありません。すべての階層を同じ大きさにしたい場合は、各階層のfont-sizeへ同じrem値を指定すると扱いやすくなります。上の例で1.2emを1.2remに変えると、外側も内側も16px × 1.2 = 19.2pxです。emとremの計算例は、MDNのfont-sizeプロパティでも確認できます。

remの基準と使い方

remのrはroot（ルート）を表します。remは、ページ全体の基準となる最上位のhtml要素の文字サイズを参照します。途中の親要素の文字サイズが変わっても、同じrem値なら計算結果は変わりません。

html {
  font-size: 100%;
}

.lead {
  font-size: 1.25rem;
}

.section {
  margin-bottom: 2rem;
}

ルートの計算済み文字サイズが16pxなら、1.25remは20px、2remは32px相当です。見出し・本文・共通余白を同じ基準から組み立てたいときに向きます。

1remとpxの換算条件

多くのブラウザーでは初期の文字サイズが16pxですが、ユーザー設定やサイト側のhtml指定で変わることがあります。

1rem = 16pxは計算例としてよく使われる前提であり、常に固定された換算ではありません。 htmlの計算済み文字サイズが18pxなら、1remは18px、1.25remは22.5px相当です。

remを使う目的は、すべてを特定のピクセル値へ換算することではありません。ページ全体で一つの基準にそろえ、基準が変わったときに関連するサイズも連動させることです。

文字・幅・余白・枠線での使い分け

初心者は、次の順で「何へ連動させたいか」を考えると選びやすくなります。

ページ全体の文字・余白へ連動：rem
親の領域へ連動する幅：%
一つの部品の文字へ連動する余白：em
連動が不要な細い枠線・固定寸法：px

同じ部品の中でも、文字・幅・余白・枠線で単位を使い分けて構いません。上の組み合わせを出発点にし、連動させたい基準が違う場合は選び直します。

1枚のカードで4単位を試す

4つの単位は競争相手ではありません。目的が違うため、一つの部品で自然に併用できます。

パソコンのテキストエディター（VS Codeなど、コードを書くアプリ）とブラウザーを用意します。次の例はHTMLとCSSを一つにまとめているので、別のCSSファイルは不要です。<style>と</style>の間にCSSを書きます。既存サイトへ貼り付けず、練習用の新しいファイルで試しましょう。

STEP

コードをコピーする

新しいファイルに、次のコードを最初から最後までコピーします。

STEP

HTMLファイルとして保存する

文字コードをUTF-8にして、units.htmlという名前で保存します。末尾が.html.txtにならないようにします。

STEP

カードの表示を確認する

保存したunits.htmlをブラウザーで開き、緑の枠線があるカードを確認します。コードそのものが表示される場合は、ファイル名の末尾を確認します。

STEP

一つずつ値を変える

下の説明に沿って値を一つ変えたら上書き保存し、ブラウザーを再読み込みして変化を比べます。次の実験へ進む前に、変更した値を元へ戻します。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSSの単位の練習</title>
  <style>
    html { font-size: 100%; }
    body { margin: 16px; font-family: sans-serif; }
    .stage { width: 500px; max-width: 100%; }
    .unit-card {
      box-sizing: border-box;
      width: 80%;
      max-width: 40rem;
      padding: 1.5em;
      border: 1px solid #536048;
      font-size: 1rem;
    }
  </style>
</head>
<body>
  <main class="stage">
    <article class="unit-card">
      <h2>CSSの単位</h2>
      <p>基準に合わせて単位を選びます。</p>
    </article>
  </main>
</body>
</html>

box-sizing: border-box;：widthとmax-widthへ内側余白・枠線を含める。外側のmarginは含めない
width: 80%;：親の.stageの幅に合わせて横幅を変える
max-width: 40rem;：ページ全体の文字基準に合わせて広がりすぎを防ぐ
padding: 1.5em;：カードの文字サイズに合わせて内側余白を変える
border: 1px solid #536048;：太さ1px・実線・緑色の枠線を引く
font-size: 1rem;：ページ全体の文字基準に合わせる

親の幅500px・文字16pxの例。border-boxを指定したwidth 80%は余白と枠線を含め400px、padding 1.5emは各24px。

ブラウザーの文字サイズが16pxで親の.stageを500px確保できる画面なら、カードの幅は500px × 80% = 400pxです。border-boxにより、この400pxに左右各24pxの内側余白と各1pxの枠線が含まれます。内容部分の幅は350pxになります。画面が狭い場合は、.stageのmax-width: 100%;に合わせてカードも縮みます。

最初に.unit-cardのwidth: 80%;だけをwidth: 100%;へ変え、保存・再読み込みをします。ルートの文字サイズが16pxで、初期の.stageが500px以下なら、カードが親の幅まで広がります。次にwidthを80%へ戻してから、padding: 1.5em;をpadding: 2em;へ変えます。文字サイズが16pxなら内側余白は各32pxです。外側の幅は同じで、文字を置ける範囲が狭くなれば確認できています。

最大幅も試す場合は、.unit-cardをwidth: 80%;・padding: 1.5em;へ戻し、.stageのwidth: 500px;だけをwidth: 900px;へ変えます。表示領域に親の幅900pxを確保でき、ルート文字サイズが16pxなら、900pxの80%は720pxですが、max-width: 40rem;で640pxに制限されます。狭い画面では親も縮むため640pxより小さくなることがあります。確認後は親の幅を500pxへ戻します。

box-sizingを指定しない通常の要素では、widthの外へ内側余白と枠線が加算されます。幅の扱いはMDNのbox-sizingプロパティで確認できます。.unit-cardのclass指定を復習したい方は、要素・class・idセレクターの違いも確認してください。

CSSの単位が反映されないときの確認順

練習例の表示が予想と違うときは、まずunits.htmlを上書き保存してブラウザーを再読み込みします。その後、次の順に確認してください。直した値が反映され、基準から計算した結果と合えば、そこで確認を終えて構いません。

書き方：20pxの間に空白がなく、0以外の長さへ単位があるか
使える値：そのプロパティが指定した単位を受け付けるか。たとえばfont-weight: 700px;は無効
適用先：HTMLのclass="unit-card"とCSSの.unit-cardが一致しているか
計算の基準：幅の%は親領域、余白のemはカードの文字サイズを参照しているか
上限・競合：max-widthが幅を制限していないか。別のCSSで同じプロパティを上書きしていないか
別ファイルのCSS：練習例を外部CSSへ分けた場合だけ、そのCSSも保存し、HTMLから読み込んでいるか

無効な指定と単位なし数値の違い

次の3行は、問題の種類が異なります。

.sample {
  font-size: 20;
  width: 50 px;
  font-weight: 700px;
}

font-size: 20;：0以外の長さなのに単位がない
width: 50 px;：数値と単位の間に空白がある
font-weight: 700px;：font-weightは長さではなく、数値やキーワードを受け付ける

ブラウザーは、書き方が正しくないCSS指定（無効な宣言）を適用しません。ただし、同じ{ }内にあるほかの正しい指定はそのまま適用されます。

.sample {
  font-size: 20;
  color: #536048;
}

この例ではfont-sizeは無効ですが、colorは有効です。文字色だけ変わるため、「CSS全体が読み込まれていない」と早合点しないでください。

HOAI Point

一つの値が無効でも、同じルール内の有効な宣言は別に適用されます。 変わったプロパティと変わらないプロパティを分けると、原因を絞り込めます。

ブラウザーや文字サイズ設定による違い

px・%・em・remは主要ブラウザーで広く使える基本的な値です。通常、対応していないための代替コードは必要ありません。

保存先・書き方・適用先に問題がなければ、親領域の幅、htmlの文字サイズ、ブラウザーのズームを確認します。%・em・remは基準の変化に合わせて再計算されます。例の数値と違うことだけで失敗と判断せず、自分の画面で基準となる値を確かめます。

よくある質問

pxは使わない方がよいですか？: いいえ。pxは1pxの枠線、固定寸法のアイコン、変化を確認する練習などで分かりやすい単位です。文字や全体余白をユーザー設定・ページ基準へ連動させたい場合は、remやemも検討します。目的に合わせて選んでください。
1remは必ず16pxですか？: 必ずではありません。多くのブラウザーでは初期値が16pxですが、ユーザー設定やhtml要素のCSSで変わります。16pxは計算例の前提として使い、実際の値はルート要素の計算済みfont-sizeで判断します。
emとremはどちらを使えばよいですか？: 部品の文字サイズに合わせて内側余白などを変えたいならem、ページ全体の文字・余白を共通基準へ合わせたいならremが候補です。font-sizeにemを使うと入れ子で大きさが重なるため、同じ大きさを保ちたい階層ではremが扱いやすくなります。
%はいつも親要素を基準にしますか？: 「親」とだけ覚えない方が安全です。widthは包含ブロック（通常は親の内容領域）の幅、font-sizeは親要素の文字サイズを基準にします。プロパティごとに何を100%とするか確認してください。
0にも単位を付ける必要がありますか？: 長さが0なら、margin: 0;やpadding: 0;のように単位を省略できます。0pxと書いても有効ですが、単位なしの0が簡潔です。ただし、すべてのCSSデータ型で同じとは限らないため、ここでは長さの値として覚えてください。