＜本記事のターゲット層＞
- CSSの単位でいつも混乱する人
- px以外の単位がよくわからない人
- 単位の使い分けを知りたい人
はじめに
昭和世代なもので、px以外の単位を使うときに慣れるまで苦労しました。あるいは久しぶりに触ると、分かっているつもりでついつい間違えて使ってしまうときもあり、チートシート的なものと、思い出せる資料が欲しいなーと思い、この記事を書くことにしました。
単位について
CSS（Cascading Style Sheets）では、長さやサイズを指定するときに「単位」を使います。単位は、フォントサイズや幅（width）・高さ（height）、マージン(margin)・パディング(padding)などを設定するときに必要です。
以下では、CSSでよく使う単位を「絶対単位」と「相対単位」に分けて、表にまとめます。
※参考ページ：MDN
✅ 絶対単位（常に同じサイズ）
絶対単位は、画面サイズや文字サイズに関係なく、常に一定の大きさです。
| 単位 | 説明 | 例 | 備考 |
|---|---|---|---|
px |
ピクセル（画面の点） | font-size: 16px |
一番よく使われる単位 |
cm |
センチメートル | width: 10cm |
印刷向け |
mm |
ミリメートル | height: 50mm |
印刷向け |
in |
インチ（1in = 2.54cm） | width: 1in |
印刷向け |
pt |
ポイント（1pt = 1/72in） | font-size: 12pt |
主に印刷業界で使用 |
pc |
パイカ（1pc = 12pt） | font-size: 1pc |
あまり使われない |
✅ 相対単位（親要素や画面サイズによって変わる）
相対単位は、他の要素に対してサイズが決まるので、レスポンシブ（画面に合わせた）デザインに向いています。
| 単位 | 説明 | 例 | よく使う場面 |
|---|---|---|---|
% |
親要素に対する割合 | width: 50% |
コンテナの半分など |
em |
親のフォントサイズに対する倍率（1em = 親と同じ） | font-size: 2em |
親のサイズの2倍 |
rem |
ルート（html要素）のフォントサイズ基準（root em） | font-size: 1.5rem |
どこでも同じ基準でサイズ指定可 |
vw |
ビューポート幅（画面幅）の1% | width: 100vw |
画面全体の幅に合わせる |
vh |
ビューポート高さの1% | height: 100vh |
画面全体の高さに合わせる |
vmin |
vwとvhの小さい方の値 |
width: 50vmin |
正方形などに便利 |
vmax |
vwとvhの大きい方の値 |
width: 50vmax |
フルスクリーン背景など |
ch |
"0" の幅を基準にした文字幅 | width: 20ch |
テキストの長さに合わせたいとき |
ex |
小文字の"x"の高さを基準 | height: 2ex |
あまり使われない |
🔰 初心者へのアドバイス
-
まずは
px、%、em、remを覚えるのがおすすめ。 -
レスポンシブ対応には
remや%を使うと便利。 -
フォントサイズは
rem、レイアウトには%やvw/vhを組み合わせよう。
🎯 単位の使い分け【具体例付き】
| 使う場面 | おすすめ単位 | 理由・使い方例 |
|---|---|---|
| フォントサイズ | rem |
ルートのサイズに比例。全体の拡大縮小がしやすい。 例： font-size: 1.2rem;
|
| ボタンや余白のサイズ |
em または rem
|
テキストサイズに合わせて調整しやすい。 例： padding: 0.5em 1em;
|
| コンテンツの幅 | % |
親要素に対して柔軟に変化。 例： width: 100%;
|
| 全画面表示 |
vw, vh
|
ビューポート基準。画面サイズに対応できる。 例： width: 100vw; height: 100vh;
|
| テキストの幅 | ch |
文字数に応じたサイズ調整に便利。 例： width: 60ch;
|
| 固定サイズの画像や線 | px |
デザイン上ぴったり合わせたいとき。 例： border: 1px solid #ccc;
|
📱 レスポンシブデザインにおけるコツ
レスポンシブデザインとは、スマホ・タブレット・PCなど、画面サイズが違っても見やすいデザインのことです。
🔹 1. フォントサイズは rem で統一する
html {
font-size: 16px; /* 基準値（1rem = 16px） */
}
h1 {
font-size: 2rem; /* = 32px */
}
✅ ユーザーがブラウザの文字サイズを変更しても柔軟に対応できます。
🔹 2. レイアウト幅は % や vw を使う
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
✅ %で柔軟に、max-widthでPCなど大画面で見やすく調整。
🔹 3. マージン・パディングは em or rem
.card {
padding: 1.5rem;
margin-bottom: 2rem;
}
✅ フォントサイズに比例して余白が自動で調整され、統一感が出ます。
🔹 4. 画面サイズによって切り替える（メディアクエリ）
@media (max-width: 768px) {
.container {
padding: 1rem;
}
}
✅ スマホサイズのときだけ余白やレイアウトを変更できます。
🔹 5. ビューポート対応の高さ調整は vh
.hero {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
✅ 常に画面の高さに合わせたセクションが作れます（トップページのヒーローなどに便利）。
🧩 まとめ
| 要素 | 単位 | ポイント |
|---|---|---|
| テキスト | rem |
ルート基準で管理しやすい |
| パディング |
em, rem
|
テキストと連動すると自然な余白になる |
| 幅・高さ |
%, vw, vh
|
画面サイズに応じて柔軟に調整できる |
| 固定サイズ | px |
デザインを正確に調整したいとき |