📏 CSS単位変換
px・rem・em・vw・vh・% のCSS単位をまとめて相互変換します。ルートや親要素、ビューポートの条件を指定でき、どれか1つを入力すると残りが即座に更新されます。すべての処理はブラウザ内で完結し、入力内容はサーバーに送信されません。
emは親要素font-size、%は親要素の幅、vw/vhはビューポートの幅・高さを基準に計算します。
px
rem
em
vw
vh
%
| px | rem |
|---|
📘 使い方
- 上部の「変換の前提条件」で、ルートfont-size・親要素font-size・親要素の幅・ビューポート幅/高さを設定します。
- px・rem・em・vw・vh・% のいずれかの欄に値を入力すると、他の単位が自動的に計算されます（小数第4位まで、末尾の0は省略）。
- 前提条件を変更すると、現在の値を基準に各単位が再計算されます。
- 下部の早見表で、よく使うpx値が現在のルートfont-sizeで何remになるかを確認できます。
❓ よくある質問
remとemの違いは何ですか？
rem（root em）はルート要素（html）のfont-sizeを基準にします。emは直近の親要素のfont-sizeを基準にするため、入れ子で値が累積する点に注意が必要です。一貫したサイズ設計にはremが扱いやすいです。
vwとvhはどう計算されますか？
1vw はビューポート幅の1%、1vh はビューポート高さの1%です。本ツールでは指定したビューポート幅・高さを基準に、pxとの相互変換を行います。
%は何を基準にしていますか？
要素のプロパティによって基準が変わりますが、本ツールでは「親要素の幅」を基準（width相当）として計算しています。font-sizeの%は親のfont-size基準になるなど、実際のCSSでは文脈により異なります。
入力値はサーバーに送信されますか？
いいえ。すべての計算はブラウザ内（クライアントサイド）で行われ、入力値がサーバーへ送信されることはありません。オフラインや file:// でも動作します。