CSSの単位まとめ｜px・em・rem・%の違いとvw/vh・clamp・calcの使い方をわかりやすく解説

CSSで使える単位は多く、「どれを使えばいいのか？」と迷う方も多いかと思います。

この記事では、Web制作でよく使われる px、em、rem、% 、vw/vhの違いや使い分け方を、わかりやすく解説します。

また、単位同士を組み合わせて柔軟にレイアウトを調整できる calc() の使い方も紹介します。

単位は絶対単位と相対単位に分類される
絶対単位：px（ピクセル）とは？
相対単位：emとは？
remとは？
％（パーセント）
- %の基準（プロパティ別まとめ）
- marginとpaddingのパーセントについて
vw / vh
単位を扱う関数
- clamp()
- 計算ができるcalc
まとめ

単位は絶対単位と相対単位に分類される

CSSにおける単位というのは、絶対単位と相対単位に分類されます。

例えば、mm（ミリメートル）。

CSSでmmを使うことはほとんどありませんが、指定することができます。

1mmはどんな環境でも1mmです。変化しません。

このような単位を絶対単位と呼びます。

逆に、emという単位は親要素のフォントサイズによって大きさが変化します。

このような単位を相対単位と呼びます。

「絶対単位」「相対単位」という言葉を覚える必要はありませんが、意味だけは頭に入れておきましょう。

なお、「絶対単位」「相対単位」については下記の記事でも紹介しています。良ければご参考下さい。

【CSS】絶対単位と相対単位について今回はWebサイトを制作する際に使用する「絶対単位」と「相対単位」を説明します。初めての方にもわかるように詳しく説明しま…

絶対単位：px（ピクセル）とは？

px（ピクセル）は絶対単位です。

pxを指定した要素の文字サイズは、親要素の影響を受けません。

例えば以下のようなコードがあったとしましょう。

<div class="box">
  <p class="text">text(30px)</p>
  <p>text(12px)</p>
</div>

body {
  font-size: 16px;
}
.box {
  font-size: 12px;
}
.text {
  font-size: 30px;
}

bodyには16pxが指定されていますが、.textには30pxを指定しています。

bodyや親要素には関係なく、30pxで表示されます。

.textの指定がない場合は .box で指定されている12pxで表示されます。

pxは常に固定サイズで表示されるため、親要素のフォントサイズに影響されません。

デザインのコントロールはしやすい一方、スマホやタブレットで文字サイズを変更したい時は、一つ一つ変更して調整しなくてはいけないというデメリットもあります。

相対単位：emとは？

emは親要素のフォントサイズによって大きさが変化します。

例えば、以下のようなHTMLとCSSがあったとします。

<body>

<p>テスト</p>

<div class="box">
  <p>テストテスト</p>
  <p class="text">テストテストテスト</p>
</div>

</body>

/* ブラウザのデフォルトの文字サイズは16px */
.box {
  font-size: 1.2em; /* 16px × 1.2 => 19.2px */
}
.text {
  font-size: 1.2em; /* 19.2px × 1.2 => 23.04px */
}

ブラウザのデフォルト値は基本16px となっています。

.box　に指定している 1.2emというのはブラウザのデフォルト値16pxを1.2倍した値になります。

16px × 1.2 => 19.2px

さらに、.boxのフォントサイズが19.2pxになったので、その子要素の .text に1.2emを指定すると、

19.2px × 1.2 => 23.04px

という値になります。

サンプル

テスト(16px)

テストテスト(19.2px)

テストテストテスト(23.04px)

emはフォントサイズだけではなく、要素の横幅（width）や余白（padding / margin）にも使えます。

例えば、「〇〇文字分の横幅」を要素に指定したい時に便利です。

4emなら、ちょうど4文字分収まる横幅ということになります。

また、文字周りのpaddingやmarginをemで設定しておくと、文字サイズに応じて余白が調整されるのでおすすめです。

ただし、emには弱点があり、HTMLの構造が複雑になると、どの要素の文字サイズが、どの子要素の文字サイズに影響を与えるか分かりにくくなるという点です。

それを解決できるのが、remという単位です。

remとは？

remは親要素ではなく、htmlのフォントサイズ（またはブラウザのデフォルト値16px）を基準にサイズが決まる相対単位です。

em のようにネスト構造によるサイズの連鎖がないため、構造が複雑でもサイズを予測しやすいのが特徴です。

例えば、以下のようなHTMLがあったとします。

<body>
  
  <p>テスト</p>
  
  <div class="box">
    テスト
    <p class="text">テストテスト</p>
  </div>

</body>

そして、CSSを以下のように指定します。

html {
  font-size: 20px;
}
.box {
  font-size: 1.2rem; /* 20px × 1.2 => 24px */
}
.text {
  font-size: 1.2rem; /* 20px × 1.2 =>24px */
}

.textの中にある文字は、.boxの文字サイズの影響を受けません。これがemとの違いです。html要素の指定された値を基準として計算されます。

htmlに特に指定がない場合は、ブラウザのデフォルトである16pxが基準になります。

/* htmlに指定がない場合 */
.box {
  font-size: 1.2rem; /* 16px × 1.2 => 19.2px */
}
.text {
  font-size: 1.2rem; /* 16px × 1.2 => 19.2px */
}

いかがでしょうか。rem は扱いもシンプルで、直感的に使いやすい単位です。

2025年現在、実務で最も使われているのはこのremになります。

実務ではまずCSSのリセット（またはnormalizeやsanitize）を適用してブラウザ固有のスタイルを整えた上で設計を始めるのが一般的です。

この時に、rem や em のような相対単位を使う場合は、html や body に明示的に font-size を設定しておくことで、サイト全体のサイズや余白を一括で管理でき、PCやスマホどんな環境でも一貫したデザイン調整が可能となります。

％（パーセント）

パーセントは簡単なようでちょっと難しい単位です。

文字に使う場合は簡単で、emと同じように、親要素のフォントサイズによって大きさが変わります。

<body>
  <div class="box">
    テスト
    <p class="text">テストテスト</p>
  </div>
</body>

パーセントを使うと以下のようになります。

/* ブラウザのデフォルトの文字サイズは16px */
.box {
  font-size: 120%; /* 16px × 120% => 19.2px */
}
.text {
  font-size: 120%; /* 19.2px × 120% => 23.04px */
}

.box に指定した 120% は、親である body の 16px を基準として 19.2px になり、
.text は .box の 19.2px に対して 120% を掛けるため 23.04px になります。

% はフォントサイズ以外にも使えますが、margin, padding, height, width など他のプロパティでは「何％なのか」の基準が変わるため注意が必要です。

%の基準（プロパティ別まとめ）

まず、違いは以下となります。

font-size
親要素の文字サイズが基準
width / left / right
親要素の幅が基準
height / top / bottom
親要素の高さが基準
margin / padding:
横方向（left/right）は親要素の幅
縦方向（top/bottom）も親要素の“幅”が基準（ここが分かりにくいポイント）

marginとpaddingのパーセントについて

marginとpaddingで％（パーセント）を使う時は注意が必要です。

横方向のmarginはもちろんですが、縦方向のmarginも親要素の幅が基準になります。
親要素の高さ（height）は関係ありません。

これはpaddingも同様です。

下記の図を御覧ください。

親要素は、幅400px・高さ200px　に設定されています。

子要素には、幅・高さどちらも marginを上下左右10% に指定していますが、「必ず40px」になる（高さ200pxには関係していなことがわかります。）

html

<div class="parent">
  <div class="child">margin: 10%</div>
</div>

CSS

.parent {
  width: 400px;
  height: 200px;
  background: #e0f7fa;
  position: relative;
}   
.child {
  position: absolute;
  margin-top: 10%;   /* 400pxの10% = 40px */
  margin-left: 10%;  /* 400pxの10% = 40px */
}

vw / vh

画面（ビューポート）の幅や高さに応じてサイズを指定できる vw や vh という単位があります。

vw … Viewport Width（画面の幅の1%）
面幅に対してサイズを決めたいときに使います。
5vw なら画面幅の5%
vh … Viewport Height（画面の高さの1%）
画面の高さに対してサイズを決めたいときに使います。
100vh なら画面の高さピッタリ(100%)

.title {
  font-size: 5vw;  /* 画面幅の5% */
}
.fullscreen {
  height: 100vh;   /* 画面の高さぴったり */
}

これらを使うと、ウィンドウサイズに合わせて自動で伸縮するデザインやフォントサイズを簡単に実現できます。

この単位でよく使うのは、

vhが「ファーストビューを画面いっぱいの高さにしたいとき」など、セクションやヒーロー画像の高さ調整でよく使われます。

vwは大きな見出しなど“幅に応じて伸縮させたい要素”で使われることが多いです。

単位を扱う関数

clamp()

clamp() は、CSSで値の最小値・推奨値・最大値を同時に指定できる便利な関数です。

以下の指定で、最小は1rem、通常は4vw、最大2.5remまで自動で伸縮すると言った形で利用できます。

font-size: clamp(1rem, 4vw, 2.5rem);

これにより、スマホからPCまで可変かつ、極端な値になりすぎない設計が簡単にできます。

clamp()を使えば、メディアクエリを多用せずに柔軟なレスポンシブデザインが組めます。

計算ができるcalc

calcを使うと計算を行うことができます。

例えば、以下のようなHTMLがあったとします。

<div class="container">
  <div class="content">メインコンテンツ（可変幅）</div>
  <div class="sidebar">サイドバー（幅200px）</div>
</div>

そして、以下のようなCSSを指定します。

.container {
  display: flex;
}
.content {
  width: calc(100% - 200px);
  height: 180px; /* 通常ここは不要 */
  background-color: #eee;
}
.sidebar {
  width: 200px;
  background-color: #bbb;
  height: 180px; /* 通常ここは不要 */
}

こうすると、.contentの横幅は(100% – 200px)になります。

つまり、サイドバーの200px横幅分引いた分が横幅になり、ウィンドウサイズに応じて.contentの幅が変化するのです。

このように、一方は固定の幅、一方は可変の幅にする時にcalcは真価を発揮します。

デモを用意しましたので下記を開いてブラウザの横幅を広げたり縮めたりして下さい。
.conten tの幅が自動で調整されることが分かります。

デモ

他にも、このような使い方もできます。

<ul class="list">
  <li>menu</li>
  <li>menu</li>
  <li>menu</li>
</ul>

.list {
  display: flex;
  width: 500px;
}
.list li {
  width: calc(100% / 3);
}

こうすることで、liの横幅がちょうど3分の1になります。

便利ですね。

まとめ

単位は色々あってややこしいかもしれませんが、一通り覚えておくと便利です。

レイアウトを効率よくできるように、使い方を覚えておきましょう。

他にもこんな記事があります。

【Webサイト制作】超初心者向けHTML・CSS入門講座今回は、超初心者向けにHTML・CSSの書き方を解説していこうと思います。HTML/CSSのことは全く分からないという人でも分かるよ…