Web技術を整える
初級px・rem・em を整える。
＝ 24px が何 rem かをすぐ出し、clamp() も作る
px と rem が初めての方は、先に そもそも px と rem とは・どんな場面で使うか をどうぞ。
値と単位を入れる
値・単位・基準フォントサイズ・親要素のpxを入れると、すぐ下に全単位が出ます。
結果
24px ＝ 1.5rem
px
24
rem
1.5
em
1.5
pt
18
%
150
実寸の見本（この大きさで表示。最大 96px まで）
整える Aa 123
バーの長さ：基準サイズの4倍を満タンとした比率
clamp() を生成する
最小・最大のフォントサイズ（px）と、その間で変化させたいビューポート幅（px）を入れます。
結果
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)
画面幅が 320px のとき 16px、1280px のとき 24px になり、その間は画面幅に比例して滑らかに変化します（320px 未満は 16px、1280px 超は 24px で固定）。
画面幅と文字サイズの関係（折れ線）
px⇔rem 早見表
基準フォントサイズ16pxでのpx⇔rem対応です（上の入力で基準を変えても、この表は16px基準のままです）。
| px | rem |
|---|---|
| 8px | 0.5rem |
| 10px | 0.625rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 28px | 1.75rem |
| 32px | 2rem |
| 36px | 2.25rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 56px | 3.5rem |
| 64px | 4rem |
| 72px | 4.5rem |
Tailwind の text-* / spacing 対応表
Tailwind CSS の標準スケール（既定16px基準）です。プロジェクトでカスタムスケールを使っている場合は数値が変わります。
| クラス | rem | px |
|---|---|---|
| text-xs | 0.75rem | 12px |
| text-sm | 0.875rem | 14px |
| text-base | 1rem | 16px |
| text-lg | 1.125rem | 18px |
| text-xl | 1.25rem | 20px |
| text-2xl | 1.5rem | 24px |
| text-3xl | 1.875rem | 30px |
| text-4xl | 2.25rem | 36px |
| text-5xl | 3rem | 48px |
| text-6xl | 3.75rem | 60px |
| spacing | rem | px |
|---|---|---|
| 1 | 0.25rem | 4px |
| 2 | 0.5rem | 8px |
| 3 | 0.75rem | 12px |
| 4 | 1rem | 16px |
| 5 | 1.25rem | 20px |
| 6 | 1.5rem | 24px |
| 8 | 2rem | 32px |
| 10 | 2.5rem | 40px |
| 12 | 3rem | 48px |
| 16 | 4rem | 64px |
| 20 | 5rem | 80px |
| 24 | 6rem | 96px |
| 32 | 8rem | 128px |
| 40 | 10rem | 160px |
| 48 | 12rem | 192px |
| 56 | 14rem | 224px |
| 64 | 16rem | 256px |
そもそも px と rem とは
CSS で「文字や余白の大きさ」を決める、2つの物差し。
px は pixel（ピクセル）の略で、画面上の長さを数字で直接決める単位です。rem は root em の略で、ページの一番上（html 要素）の文字サイズの何倍か、という相対的な単位です。多くのブラウザの初期値では 1rem が 16px なので、1.5rem は 24px にあたります。px は「センチ」の定規、rem は「基準の文字を 1 とした倍数」と考えると違いが分かります。
ほかに em、pt、% も同じ「長さの単位」の仲間です。pt は印刷由来の単位で、CSS では 1pt が約 1.33px にあたります。デザインの資料はふつう px で渡されるので、コードに書くときに rem へ直す作業が日常的に発生します。このページはその換算を助けるためのものです。
どこで・どんな場面で使うか
-
デザインを CSS に起こすとき
デザインカンプの「24px」を、コードでは「1.5rem」と書き直す、といった換算を何度も行います。
-
スマホとパソコンで文字サイズを調整するとき
画面の大きさに合わせて、見出しや本文のサイズを変える設定に単位の知識が必要です。
-
読みやすさ（アクセシビリティ）を考えるとき
利用者がブラウザで文字を大きくしたとき、サイトが追従するかどうかは単位の選び方で決まります。
-
既存の CSS を読み解くとき
他の人が書いたコードに混ざる em や % を、実際の大きさに直して理解します。
-
学習や転職活動のコーディング課題
「px ではなく rem で書く」といった条件が出ることがあり、単位の意味を説明できると安心です。
なぜ覚えておくと得か
- 換算の手間が減る。基準の大きさと倍数の関係が分かれば、電卓を叩かずに見当がつきます。
- 利用者に優しいサイトになる。文字を大きく設定している人にも読みやすく表示できます。
- 保守が楽になる。サイト全体のサイズ感を、基準の1か所を変えるだけで調整しやすくなります。
上の変換ツールに、いつも使う px の値を入れて、rem や em でいくつになるか試してみてください。
rem と em の違い
rem（root em）は、html 要素（ルート）の font-size を基準にした単位です。
ページのどこに書いても、常に同じルート値（既定では多くのブラウザで16px）を基準にするため、入れ子の深さに関係なく計算結果が一定になります。
一方 em は、その要素の親要素の font-size を基準にします。親の font-size が変わると、
子の em で指定したサイズも連動して変わるため、見出しの中の小さな装飾文字のように「親に対する相対サイズ」を表現したいときに向きます。
ただし em を入れ子にすると、親のサイズ変更が子・孫へと掛け算式に伝わっていくため、階層が深いコンポーネントでは意図しない拡大・縮小が起きることがあります。
このページの「%」も、font-size の指定としては em と同じく親要素基準です。
なぜ rem を使うか
ブラウザには、利用者が設定画面から既定のフォントサイズを変更できる機能があります（弱視の利用者などが文字を大きくする設定）。 px で固定した文字サイズはこの設定の影響を受けませんが、rem はルートの font-size を基準にするため、 利用者が既定サイズを変更すると、rem で指定した文字サイズもその比率のまま拡大・縮小されます。 サイト全体の文字サイズをまとめて調整したいときも、ルートの font-size を1箇所変えるだけで rem 指定の要素すべてに反映されます。
62.5% トリック
html { font-size: 62.5%; } は、
ブラウザ既定の16pxに対して62.5%を掛け、ルートの font-size を10pxにする書き方です。
この状態では 1rem = 10px になるため、「1.6rem = 16px」のように、rem の値を10倍するだけでpx換算ができ、暗算やデザインカンプの数値からの変換が簡単になります。
この指定は px ではなく %（ブラウザの既定値に対する割合）なので、利用者がブラウザの既定フォントサイズを変更した場合も、
ルートの font-size はその設定に対して62.5%のまま連動し、比率は保たれます。
一方で、この62.5%という数値自体はコードを読んだだけでは「なぜ10px相当になるか」が伝わりにくく、
外部から読み込むライブラリやコンポーネントが「1rem=16px」を前提に数値を書いている場合、そちらとの間でサイズの食い違いが起きる点には注意が必要です。
clamp() によるフルードタイポグラフィ
clamp(最小値, 可変値, 最大値) は、
可変値がとりうる範囲を最小値〜最大値の間に収めるCSS関数です。可変値に「rem＋vw」の式を入れることで、
画面幅が変わるたびにメディアクエリで段階的にフォントサイズを切り替えるのではなく、画面幅の変化に比例して連続的にサイズを変化させられます。
このページの生成式は、指定した最小ビューポート幅で最小サイズに、最大ビューポート幅で最大サイズになるように、
可変部分の傾き（画面幅1pxあたりの変化量）と切片を逆算しています。指定した範囲の外側（より狭い・より広い画面幅）では、
clamp() がそれぞれ最小値・最大値で頭打ちにするため、極端に小さい・大きい画面でも文字が読みにくくなり過ぎません。
このツールについて
CSSの「24px」「1.5rem」「1.2em」を一発で相互変換。基準フォントサイズ（ルート）と親要素のpxも変更でき、pt・%まで同時に表示します。最小/最大サイズとビューポート幅を入れれば、フルードタイポグラフィ用の clamp() もその場で作れます。入力はこの端末の中だけで計算します（送信ゼロ）。
24px は何 rem？ px・rem・em・pt・% を一発で相互変換。基準フォントサイズも変更でき、clamp() の自動生成つき。
主な機能
- px／rem／em／pt／% の5単位を同時表示
- 基準フォントサイズ・親要素の px が可変
- clamp() の流体タイポグラフィ生成
- px⇔rem の早見表と Tailwind の対応表・送信ゼロ
- 実寸の見本と clamp() の折れ線グラフ
よくある質問
Q. px と rem の違いは何ですか？
A. px は絶対的なピクセル数、rem はルート（html）の font-size を基準にした相対単位です。rem はブラウザの文字サイズ設定に追従するため、読みやすさの観点で推奨されます。
Q. clamp() とは何ですか？
A. clamp(最小値, 可変値, 最大値) は、値が最小〜最大の範囲に収まるようにする CSS の関数です。可変値に rem＋vw の式を入れると、画面幅に応じて連続的にフォントサイズが変わる「流体タイポグラフィ」が作れます。
Q. 62.5% トリックとは何ですか？
A. html { font-size: 62.5%; } でルートを 10px にし、1rem＝10px として暗算しやすくする手法です。% 指定なので、ブラウザの既定フォントサイズの設定には追従します。
入力値はURLの「#」以降に入るためサーバーには送信されません。リンクを開くと同じ状態を復元します。
続けて整える
この内容は、研修でも扱っています
totonoe.tech を運営する株式会社Koinobori は、法人向けの研修サービス「NOBORIBA®」も運営しています。 ここで手を動かした内容を、講師から教わる形の研修です。このページの道具は無料のまま、登録もいりません。
