CSS単位コンバーター (px / rem / em / vh / vw)

pxではなくremを使う理由

ブラウザの初期値は16pxですが、弱視の人はブラウザ設定で標準フォントサイズを大きくすることがあります。remで指定した文字はその設定に合わせて大きくなりますが、pxで指定した文字は変わりません。ページズームはどちらも拡大しますが、多くのユーザーが頼りにしているのはフォントサイズ設定です。また、WCAGのテキストサイズ変更基準では、内容を損なわずに200%まで拡大できることが求められます。文字サイズとその周囲の間隔にはremを使い、細い線や境界線にはpxを使ってください。

em列とネスト

emは要素自身のフォントサイズを基準にします。ただしfont-size自体では親要素のフォントサイズが基準です。ここでのem値は親がルートサイズであることを前提としており、トップレベルでのみ成り立ちます。0.875emの要素内でさらに0.875emを指定すると、14pxではなく12.25pxになり、縮小が累積します。そのためremが安全なデフォルトであり、emはコンポーネントの文字に合わせて拡大縮小したい間隔に適しています。

62.5%の基準値とビューポート単位

html { font-size: 62.5% }を設定すると1remが10pxになり、計算しやすくなります。基準サイズには10を入力してください。ただし、サードパーティ製コンポーネントを含むrem指定のすべてが小さくなるため、bodyに読みやすいサイズを改めて設定してください。

vwとvhの数値は1440 × 900のビューポートを前提としています。スマートフォンでは、ブラウザツールバーが表示されている間、100vhが表示領域より高くなることがあります。100svhと100dvhはこの点を考慮した単位です。

使い方

1. ピクセル値 (px) とルートの基準サイズ（デフォルト16px）を入力します。
2. 算出されたrem・em・vw・vhの値を確認します。
3. すぐ使えるCSSスニペットをコピーするか、スケール表を参照します。

プライバシーと制限事項

クライアント側のJavaScriptで即時に実行します。