📏 CSS単位変換(px⇄rem⇄em⇄pt)
px・rem・em・pt・%・vwの相互変換や、レスポンシブ対応の clamp() の生成ができるツールです。CSS設計・コーディングの単位換算にご利用ください。
基準の設定
px
px
一括変換
| px | 16px | |
| rem | 1rem | |
| em | 1em | |
| pt | 12pt | |
| % | 100% | |
| vw | 1.25vw |
よく使うpx値の早見表
| px | rem | pt |
|---|---|---|
| 8px | 0.5rem | 6pt |
| 10px | 0.625rem | 7.5pt |
| 12px | 0.75rem | 9pt |
| 14px | 0.875rem | 10.5pt |
| 16px | 1rem | 12pt |
| 18px | 1.125rem | 13.5pt |
| 20px | 1.25rem | 15pt |
| 24px | 1.5rem | 18pt |
| 32px | 2rem | 24pt |
| 48px | 3rem | 36pt |
| 64px | 4rem | 48pt |
clamp()ジェネレーター
ビューポート幅に応じてフォントサイズなどを滑らかに可変させる clamp() を生成します。最小・最大サイズと、それぞれに対応するビューポート幅を入力してください。
px
px
px
px
clamp(1rem, 1.768vw + 0.586rem, 2rem)
最小ビューポート幅(375px)で16px、最大ビューポート幅(1280px)で32pxになるよう、 傾き 1.768vw と切片 0.586rem を線形補間で算出しています。
✅ コピーしました!
単位の解説
rem:ルート要素(html)のfont-sizeを基準にした相対単位。どの要素の中にあっても基準が一定なので、入れ子になってもサイズがぶれにくいのが特徴です。
em:その要素自身(または親要素)のfont-sizeを基準にした相対単位。入れ子構造で親のfont-sizeが変わると連動して拡大・縮小されるため、余白などの「その要素に対して相対的に決めたい値」に向いています。
pt(ポイント):印刷(DTP)由来の単位で、1pt = 1/72インチ。CSSのpxは1px = 1/96インチと定義されているため、96px = 72pt、つまり1px = 0.75ptという関係になります。
vw:ビューポート幅の1%にあたる長さの単位。画面幅に応じて可変するため、clamp()と組み合わせてレスポンシブなフォントサイズを作るのに使われます。
※ 入力内容はすべてブラウザ内で処理しており、弊社サーバーへ送信・保存することは一切ありません。
こんなツールをこれからも作っていきます。もしこれは!と思っていただけましたら、シェア・応援していただけると嬉しいです!😀