moldspoon

📏 CSS単位変換(px⇄rem⇄em⇄pt)

px・rem・em・pt・%・vwの相互変換や、レスポンシブ対応の clamp() の生成ができるツールです。CSS設計・コーディングの単位換算にご利用ください。

基準の設定
px
px
一括変換
px16px
rem1rem
em1em
pt12pt
%100%
vw1.25vw
よく使うpx値の早見表
pxrempt
8px0.5rem6pt
10px0.625rem7.5pt
12px0.75rem9pt
14px0.875rem10.5pt
16px1rem12pt
18px1.125rem13.5pt
20px1.25rem15pt
24px1.5rem18pt
32px2rem24pt
48px3rem36pt
64px4rem48pt
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()と組み合わせてレスポンシブなフォントサイズを作るのに使われます。

※ 入力内容はすべてブラウザ内で処理しており、弊社サーバーへ送信・保存することは一切ありません。

こんなツールをこれからも作っていきます。もしこれは!と思っていただけましたら、シェア・応援していただけると嬉しいです!😀

X (旧Twitter)

0

Facebook

LINE

0

はてブ

リンクコピー

✅ コピーしました!