CSSでpxではなくremを使うべきタイミングはいつですか？

フォントサイズとコンポーネントの間隔にはremを使いましょう。ユーザーがブラウザのデフォルトフォントサイズを変更した際に、レイアウトが比例してスケールします。これはアクセシビリティの観点から重要です。ボーダーやアウトラインなど、絶対に変化させたくない要素にはpxを使ってください。

emとremの違いは何ですか？

rem（ルートem）は常にルート要素のフォントサイズを基準にします（通常16px）。emは現在の要素（または親要素）のフォントサイズを基準にします。remはカスケードしないため予測しやすいですが、emはネストされた要素で値が複合し、意図しないサイズになることがあります。

vhとvwの単位はどのように機能しますか？

1vhはビューポートの高さの1%、1vwはビューポートの幅の1%です。フルスクリーンレイアウトやメディアクエリなしのレスポンシブサイジングに便利です。ただしモバイルブラウザではアドレスバーがvhに影響し、レイアウトのジャンプが発生する場合があります。

CSSで100%は何を意味しますか？

%単位は同じプロパティの親要素の値を基準にします。widthの100%は親の幅の100%、font-sizeの100%は継承されたフォントサイズの100%です。このコンテキスト依存性が%をわかりにくくさせています。

CSS単位を自動変換するツールはありますか？

はい — CSS単位変換ツールを使えば、任意の値と元単位を入力するだけで、すべての等価な値が即座に表示されます。ベースフォントサイズやビューポートサイズも設定でき、実際のプロジェクトに合わせた正確な変換が可能です。

CSS単位変換ガイド：px・rem・em・vh/vwを正しく使い分ける

デザインの「24px」が引き起こす問題

Figmaファイルを受け取ります。すべての数値はピクセルで指定されています — フォントは24px、パディングは16px、マージンは48px。その値をそのままCSSに貼り付けます。自分のマシンでは完璧に見えます。

ところが、ブラウザのデフォルトフォントサイズを20pxに設定している同僚がページを開くと、24pxの見出しはきっちり24pxのまま、その周りの要素だけがスケールします。バランスよく設計されたタイポグラフィ階層が崩れてしまいます。

これはレアなエッジケースではありません。すべての値を絶対値として設定したときに必然的に起きることです。解決策は、どの単位をいつ使うべきかを理解し、単位間の変換を素早くできるツールを持つことです。

CSS単位変換ツールはそのために作られました。ただしツールを紹介する前に、まず概念的な土台を作りましょう。

CSS単位用語集

CSSには思ったより多くの単位があります。それぞれが何を意味するかを整理します。

px — ピクセル

ほとんどの人がCSSを学んだときに最初に触れる基本単位です。1pxは標準解像度のスクリーン上で画素1つに相当します。高DPI（Retina）ディスプレイではデバイスピクセル比によって実際には2〜3物理ピクセルとしてレンダリングされますが、その計算はブラウザが行います。

重要な特性：pxは固定です。ユーザーの設定、親要素、ドキュメントの他の何にも反応しません。1pxのボーダーは常に1pxであるべき場合には最適ですが、ユーザーが大きなテキストを必要としている場合には問題になります。

rem — ルートEm

remは「ルートem」の略です。1remは<html>要素のフォントサイズと等しく、ブラウザのデフォルトでは通常16pxですが、ユーザーがブラウザで設定したデフォルトフォントサイズを反映します。

ユーザーがブラウザのデフォルトフォントサイズを20pxに設定した場合、ページ上のすべての1remは20pxになります。レイアウト全体が比例してスケールアップします。アクセシビリティ面での大きなメリットです。

1.5remは16pxベースでは24px。ベースが変わっても比率は一定で予測可能です。

em — Em（注意が必要な単位）

emはremに似ていますが、現在の要素のフォントサイズを基準にします。ネストがなければ問題ありませんが、要素を入れ子にし始めると複雑になります。

font-size: 1.2emの要素が、同様にfont-size: 1.2emの親の中にある場合、子要素は1.2 × 1.2 = 1.44emになります。3段階ネストすると1.728em。これがemの継承トラップです。

vh / vw — ビューポートの高さと幅

1vh = ブラウザビューポートの高さの1%。1vw = ビューポートの幅の1%。フルスクリーンセクションや、画面サイズに応じたフルイドタイポグラフィに非常に便利です。

注意点：モバイルではアドレスバーがスクロールによって表示・非表示になり、ビューポートの高さが変化します。100vhの要素の高さが突然変わる現象が起きます。CSS Working Groupがこれを解決するためにdvh（動的ビューポート高さ）を追加しましたが、ブラウザサポートはまだ追いついています。

% — パーセント

%は経験豊富な開発者でも混乱しやすい方法でコンテキストに依存します。width: 50%は親の幅の50%。font-size: 120%は継承されたフォントサイズの120%（emのように動作）。margin-top: 10%は包含ブロックの高さではなく幅の10% — 初めて知ると驚く動作です。

pt、cm、mm — 印刷単位

物理的な測定単位です。Webでは印刷スタイルシートでのみ使います。1pt = 1インチの1/72。通常のWebスタイルで使うことはほぼありません。

ベースフォントサイズの概念を理解する

多くのチュートリアルが飛ばしている点：ブラウザは単にデフォルトフォントサイズを持っているだけでなく、ユーザーが変更できるデフォルトフォントサイズを持っています。Chrome、Firefox、Safariすべてで設定から変更できます。歴史的にブラウザのデフォルトは16pxで、ほとんどの変換表はこれを基準にしています。

この基準から導かれる計算:

1rem = 16px  (ブラウザデフォルト基準)
0.75rem = 12px
1.25rem = 20px
1.5rem = 24px
2rem = 32px

一部のデザインシステムではhtml { font-size: 62.5%; }を使って1rem = 10pxにし計算を簡単にします（1.6rem = 16px）。このトリックは便利ですが、ブラウザデフォルトを前提としたコンポーネントで問題を引き起こすことがあり、アクセシビリティの改善にもなりません。

結論：remは常に1つの値に固定されているため予測可能です。これが大部分のタイポグラフィとスペーシングにremが適している理由です。

どのような場合にどの単位を使うか

フォントサイズ → rem

常にremです。font-sizeをpxで設定する理由はほぼありません。

body { font-size: 1rem; }       /* デフォルトで16px */
h1   { font-size: 2.5rem; }     /* デフォルトで40px */
h2   { font-size: 2rem; }       /* デフォルトで32px */
small { font-size: 0.875rem; }  /* デフォルトで14px */

コンポーネントの間隔 → remまたはpx（意図による）

パディングとマージンは判断が必要です。テキストと一緒にスケールするべき間隔（ボタンの上下パディングなど）にはremを。固定の視覚的な間隔（アイコンとテキストの間など）にはpxでも問題ありません。

.button {
  padding: 0.75rem 1.5rem;  /* フォントサイズに比例 */
  border: 1px solid currentColor;  /* 常に1px */
  border-radius: 4px;  /* 固定の視覚的プロパティ */
}

フルスクリーン・ビューポート相対レイアウト → vh/vw

ヒーローセクション、画面の一定割合を占めるモーダル、スティッキーサイドバーなどにはビューポート単位を使います。

モバイルのアドレスバー問題を覚えておいてください。モバイルでの完全なフルスクリーン動作が重要ならdvhを検討しましょう。

印刷スタイル → pt/cm/mm

@media printセクションでは物理単位に切り替えてください。プリンターはインチとポイント単位を基準に動作します。

emの継承トラップ（実例付き）

なぜemがフォントサイズで危険になるかを実際に見てみましょう。

カードコンポーネントを作るとします:

.card { font-size: 1.2em; }
.card .meta { font-size: 0.9em; }
.card .meta .timestamp { font-size: 0.85em; }

.cardの親がfont-size: 16pxなら、実際の値は:

.card → 16px × 1.2 = 19.2px
.card .meta → 19.2px × 0.9 = 17.28px
.card .meta .timestamp → 17.28px × 0.85 = 14.688px

意図とは全く異なる結果です。電卓なしにはデバッグも困難です。

同じスタイルをremで書き直すと:

.card { font-size: 1.2rem; }
.card .meta { font-size: 0.9rem; }
.card .meta .timestamp { font-size: 0.85rem; }

各値がルートフォントサイズに直接対応します。複雑な計算なしで予測可能です。

emが genuinely役立つケース：line-height: 1.5emのように要素自身のフォントサイズに対して比例すべき場合や、padding: 0.5emのようにボタンのフォントサイズが変わったときにパディングも連動して変わってほしい場合です。

変換参照表（16pxベース）

px	rem	em（継承なし）	pt
10px	0.625rem	0.625em	7.5pt
12px	0.75rem	0.75em	9pt
14px	0.875rem	0.875em	10.5pt
16px	1rem	1em	12pt
18px	1.125rem	1.125em	13.5pt
20px	1.25rem	1.25em	15pt
24px	1.5rem	1.5em	18pt
32px	2rem	2em	24pt
40px	2.5rem	2.5em	30pt
48px	3rem	3em	36pt

これらは1rem = 16pxを前提としています。ルートフォントサイズが異なれば、すべての変換が変わります。だからこそツールが必要なのです。

CSS単位変換ツールの使い方

CSS単位変換ツールは、静的な表では解決できない問題を扱います：ベースフォントサイズが16pxでない場合や、特定のビューポートサイズでの正確な変換が必要な場合です。

このツールでできること:

数値を入力
ソース単位を選択（px、rem、em、vh、vw、%、pt、cm、mm）
ベースフォントサイズを設定（デフォルト16px、変更可能）
ビューポートサイズを設定（vh/vw変換用）
すべての等価な値を即時確認

Figmaの仕様書（常にpx基準）をデザインシステム用のrem値に変換する際に使うワークフローです。px値を入力してrem値を確認するだけ。DevToolsでレイアウトが少しずれているときにpx値を入力してremと比較するのにも便利です。

Tailwind CSSユーザーへのヒント

Tailwindはドキュメントにpixelによるサイズを示していますが、内部ではremを使用しています。

Tailwindは内部的にremを使用します。 text-baseは1rem、text-lgは1.125rem、text-xlは1.25remです。Tailwindクラスに合わせてfont-sizeを直接指定する場合は、pxの数値ではなくremを使いましょう。

スペーシングスケールもremです。 p-4は1rem（デフォルトで16px）。p-8は2rem（32px）。デザイナーが「パディング24px」と言ったら、Tailwindではp-6（1.5rem）です。特定のデザイン値をTailwindクラスに対応させるときに変換ツールが便利です。

カスタムベースフォントサイズもTailwindと問題なく動作します。 html { font-size: 18px }と設定すれば、すべてのTailwind rem値が自動的に再計算されます。変換ツールでベースを18pxに設定して確認してみましょう。

まとめ

CSS単位の選択は重要な決断です。一部のユーザーでレイアウトが壊れるか、優雅に適応するかの違いです。

px — ボーダー、アウトラインなど絶対に変化させたくない視覚的プロパティ
rem — フォントサイズとスケーラブルな間隔（アクセシビリティの基本）
em — 要素自身のサイズに比例すべき場合に限定的に
vh/vw — ビューポート基準のレイアウト、モバイルフルスクリーンにはdvhを検討
% — コンテナ相対サイズ（marginの幅基準の動作に注意）
pt/cm/mm — 印刷スタイルシートのみ

CSS単位変換ツールをブックマークしておけば、単位変換に費やす時間を節約して実際の開発に集中できます。