Em/Pxコンバーター
CSSユニット間を変換します：px、em、rem、pt、%。基本フォントサイズを設定して、クイックリファレンステーブルですべての変換を瞬時に表示します。
Base Font Size
px(browser default: 16px)
Convert a Value
px
16em
1rem
1pt
12%
100Text Preview
The quick brown fox
Previewing at 16px
Quick Reference TableBase: 16px
| px | em | rem | pt | % |
|---|---|---|---|---|
| 8 | 0.5 | 0.5 | 6 | 50% |
| 10 | 0.625 | 0.625 | 7.5 | 62.5% |
| 12 | 0.75 | 0.75 | 9 | 75% |
| 14 | 0.875 | 0.875 | 10.5 | 87.5% |
| 16 | 1 | 1 | 12 | 100% |
| 18 | 1.125 | 1.125 | 13.5 | 112.5% |
| 20 | 1.25 | 1.25 | 15 | 125% |
| 24 | 1.5 | 1.5 | 18 | 150% |
| 28 | 1.75 | 1.75 | 21 | 175% |
| 32 | 2 | 2 | 24 | 200% |
| 36 | 2.25 | 2.25 | 27 | 225% |
| 40 | 2.5 | 2.5 | 30 | 250% |
| 48 | 3 | 3 | 36 | 300% |
| 64 | 4 | 4 | 48 | 400% |
| 72 | 4.5 | 4.5 | 54 | 450% |
| 96 | 6 | 6 | 72 | 600% |
All conversions happen entirely in your browser. No data is sent to any server.
Em/Pxコンバーターの使い方
- 1基本フォントサイズを設定します（デフォルト16px）。
- 2値を入力して、入力ユニットを選択します。
- 3すべての他のCSSユニットへの変換を瞬時に表示します。
- 4よく使うフォントサイズはリファレンステーブルを使用してください。
Zenovayアナリティクス
関連ツール
よくある質問
em、rem、pxの違いは何ですか？▾
px（ピクセル）はスクリーンピクセルに基づく絶対ユニットです。emは親要素のフォントサイズに対する相対ユニットです。remはルート（html）要素のフォントサイズに対する相対ユニットです。ルートが16pxの場合、1rem = 16pxです。emはネストされたときに複合されます（1.5emの中の1.5em = ルートサイズの2.25倍）；remはそうではありません。
各CSSユニットはいつ使用すべきですか？▾
フォントサイズはremを使用してください（ユーザーの設定に応じてスケールします）。コンポーネント内部の間隔はemを使用してください（コンポーネントのテキストでスケールすべき）。ボーダー、シャドウ、固定サイズ要素はpxを使用してください。幅とレイアウトは%を使用してください。ビューポート相対サイズはvw/vhを使用してください。
デフォルトの基本フォントサイズは何ですか？▾
ブラウザのデフォルトはルートフォントサイズが16pxです。ユーザーはアクセシビリティのためブラウザ設定でこれを変更できます。そのため1rem = デフォルトでは16pxであり、remユニットを使用するとユーザーの設定を尊重しますがpxではしません。
CSSユニットはレスポンシブデザインにどのように影響しますか？▾
remおよびemユニットはフォントサイズ設定でスケールしため、レスポンシブフレンドリーです。CSS clamp()関数は最小、優先、最大値を組み合わせます：font-size: clamp(1rem, 2.5vw, 2rem)。メディアクエリはルートフォントサイズを調整でき、すべてのrem基準の値は比例的にスケールします。
CSSユニットはアクセシビリティにどのように影響しますか？▾
ブラウザのデフォルトフォントサイズを増加させるユーザーはテキストがそれに応じてスケールされることを期待します。px基準のフォントサイズはこの設定を無視します。rem基準のサイズはそれを尊重します。WCAG 2.1成功基準1.4.4では、テキストが200%までサイズ変更可能であり、コンテンツの損失がないことが必要です。フォントサイズにremを使用するとこの要件を満たすのに役立ちます。