CSS単位変換
px・rem・em・%・vw・vh・ptを相互に換算。早見表つき
色・デザイン無料・登録不要端末の中で処理PR・このページには広告が含まれます
- px24px
- rem1.5rem
- em1.5em
- %150%
- vw1.6667vw
- vh2.6667vh
- pt18pt
よく使う大きさの早見表
| px | rem | em | pt | vw | vh |
|---|---|---|---|---|---|
| 1 | 0.063 | 0.063 | 0.75 | 0.069 | 0.111 |
| 2 | 0.125 | 0.125 | 1.5 | 0.139 | 0.222 |
| 4 | 0.25 | 0.25 | 3 | 0.278 | 0.444 |
| 8 | 0.5 | 0.5 | 6 | 0.556 | 0.889 |
| 10 | 0.625 | 0.625 | 7.5 | 0.694 | 1.111 |
| 12 | 0.75 | 0.75 | 9 | 0.833 | 1.333 |
| 14 | 0.875 | 0.875 | 10.5 | 0.972 | 1.556 |
| 16 | 1 | 1 | 12 | 1.111 | 1.778 |
| 18 | 1.125 | 1.125 | 13.5 | 1.25 | 2 |
| 20 | 1.25 | 1.25 | 15 | 1.389 | 2.222 |
| 24 | 1.5 | 1.5 | 18 | 1.667 | 2.667 |
| 28 | 1.75 | 1.75 | 21 | 1.944 | 3.111 |
| 32 | 2 | 2 | 24 | 2.222 | 3.556 |
| 40 | 2.5 | 2.5 | 30 | 2.778 | 4.444 |
| 48 | 3 | 3 | 36 | 3.333 | 5.333 |
| 64 | 4 | 4 | 48 | 4.444 | 7.111 |
| 80 | 5 | 5 | 60 | 5.556 | 8.889 |
| 96 | 6 | 6 | 72 | 6.667 | 10.667 |
rem はルート(html要素)、em と % は親要素の文字の大きさが基準です(% は font-size に使ったときの値。幅などに使う % は親要素の幅が基準になります)。ブラウザの初期の文字サイズはふつう16pxです。1pt は 1/72インチで、CSSでは 1px = 0.75pt です。
CSS単位変換の使い方
- 「値」と「単位」を入れます。
- 必要なら「ルートの文字サイズ」「親要素の文字サイズ」「画面の幅」「画面の高さ」を合わせます。
- 各単位に換算した値が並びます。「コピー」で値をコピーできます。
よくある質問
Q. remとemの違いは?
A. remはhtml要素の文字の大きさ、emは親要素の文字の大きさが基準です。ブラウザの初期値はふつう16pxです。
Q. %は何を基準にしていますか?
A. font-sizeに使ったときと同じく、親要素の文字の大きさを基準にしています。幅などに使う%は親要素の幅が基準になります。
Q. ptとpxの関係は?
A. CSSでは1pt=1/72インチ、1px=1/96インチと決まっているので、1px=0.75ptです。
このツールについて
CSS単位変換の無料ツール。px・rem・em・%・vw・vh・ptを相互に換算。早見表つき。登録不要で、入力した内容はブラウザの中だけで処理します。
最終更新:2026/10/19