Web技術を整える
初級px・rem・em を整える。
＝ 24px が何 rem かをすぐ出し、clamp() も作る
値と単位を入れる
値・単位・基準フォントサイズ・親要素のpxを入れると、すぐ下に全単位が出ます。
RESULT
24px ＝ 1.5rem
px
24
rem
1.5
em
1.5
pt
18
%
150
clamp() を生成する
最小・最大のフォントサイズ（px）と、その間で変化させたいビューポート幅（px）を入れます。
RESULT
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 |
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 の対応表・送信ゼロ
よくある質問
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の「#」以降に入るためサーバーには送信されません。リンクを開くと同じ状態を復元します。
