Web制作やコーディングを始めると、必ずつまずくのが「単位」ですよね。
pxやem、remやvw、vhまで
「どれを使ったらいいの？」
「レスポンシブ対応に向いている単位はどれ？」
この記事では、結論としておすすめの単位の組み合わせを最初にお伝えしたうえで、よく使われる5つの単位の特徴や、pxからremへの簡単な計算方法を分かりやすく解説します！
【結論】迷ったら「rem」使っとけ！
「結局、どの単位を使えばいいの？」という疑問に対する究極の結論はこれです。
文字の大きさや主な余白（パディング や マージン）は、基本すべて rem で指定しておけば、現代のWeb制作（スマホ対応やアクセシビリティ）においてほぼ間違いありません。
- 本文の文字サイズや主な余白
- rem 一択！（迷ったらこれ！崩れにくく誰にでも優しい）
- 画面の高さいっぱいのセクションやダイナミックなデザイン
- vh・vwで!（スマホ・PC問わず画面サイズに追従させたい時）
- 1pxのボーダー（枠線）や細かなアイコンの調整
- pxで！（何があってもシャープな線をキープしたい場所）
用途に合わせて上手に単位を使い分けることで、どんな端末で見ても美しく、メンテナンスしやすいCSSが書けるようになります。ここからは、それぞれの単位の詳しい特徴や違いを見ていきましょう！
単位は「絶対単位」と「相対単位」の2つに分かれる
CSSの単位は、大きく分けると以下の2種類に分類されます。
- 絶対単位：どの環境で見てもサイズが変わらない（例：px）
- 相対単位：親要素や画面の大きさ、ブラウザの設定によってサイズが可変する（例：rem、vw など）
スマホやタブレット、PCなど、さまざまな画面サイズがある現代のWebサイトでは、状況に応じて相対単位をうまく使いこなすことが綺麗なレスポンシブデザインを作るカギになります。
よく使われる5つの単位の特徴
ここからは、実務でよく目にする代表的な5つの単位をひとつずつ見ていきましょう。
rem（レム）★一番おすすめ！
- 種類: 相対単位
- 特徴: Webページのルート要素（一番大元の <html> タグ）のフォントサイズを基準にする単位です。
- メリット: どこで使っても基準が「大元のサイズ」でブレません。ユーザーがブラウザの文字サイズを変更しても綺麗に連動するため、アクセシビリティが高くレスポンシブ対応しやすい現代の主流の単位です。
px（ピクセル）
- 種類: 絶対単位
- 特徴: 画面上のドット（画素）を基準にした固定サイズです。16pxと指定すれば、どんな環境でも常に16pxで表示されます。
- メリット: 設計や微調整が直感的で、意図した通りのピクセル数でカチッと固定できます。
- デメリット: ユーザーがブラウザの文字サイズ設定を変えても連動しないため、アクセシビリティ（見やすさ・使いやすさ）の面では少し弱点があります。
em（エム）
- 種類: 相対単位
- 特徴: 「親要素」のフォントサイズを基準にした単位です。
- メリット: 親要素の大きさに連動して拡大縮小します。
- デメリット: 要素が入れ子（ネスト）構造になると、基準が何重にも掛け合わされてサイズが雪だるま式に膨れ上がってしまうため、現在は少し扱いに注意が必要です。
vw（ビューポート・ウィズ）
- 種類: 相対単位
- 特徴: 「画面の横幅」を基準にした単位です（ 1vw＝ 画面幅の1%）。
- メリット: スマホでもPCでも、画面幅いっぱいや、画面幅に完全に連動したダイナミックなレイアウト・文字サイズを作ることができます。
vh（ビューポート・ハイト）
- 種類: 相対単位
- 特徴: 「画面の高さ」を基準にした単位です（1vh＝ 画面の高さの1%）。
- メリット: height:100vh と指定するだけで、スマホやPCの画面いっぱいに広がるファーストビューを簡単に作ることができます。
【実践】pxからremへの簡単な計算方法
一番おすすめなのは rem なのは分かったけど、計算が面倒臭そう……」と思っていませんか？ 基本の計算式はとてもシンプルです。
一般的なブラウザのデフォルト設定（基準が 16px）の場合：
- 12px ÷ 16 = 0.75rem
計算をラクにする裏技
CSSの最初に以下のように設定しておくと、基準が「10px」になり、計算が劇的にラクになります。
CSS
html {
font-size: 62.5%; /* デフォルトの16pxの62.5% = 10pxにする */
}この設定をしておくと、「10で割るだけ」で計算できるようになります。
- 15px → 1.5rem
現場でもよく使われているテクニックなので、ぜひ試してみてくださいね！
