CSS 単位変換ツール
CSS の長さを px、rem、em、pt、%、vw、vh の間で変換します。
ツールを読み込み中…
CSS 単位変換ツール — 1 つの CSS の長さの値を、px・rem・em・pt・%・vw・vh へ一度に変換します。ルートのフォントサイズ、親要素のフォントサイズ、そしてビューポートの幅と高さを設定し、値を入力して単位を選ぶだけで、すべての等価値が即座に表示されます。計算はすべてブラウザー内で行われるため、入力した内容がアップロードされることはありません。
CSS 単位変換ツールとは？
CSS 単位変換ツールは、1 つの CSS の長さを px・rem・em・pt・%・vw・vh の 7 つのよく使う単位へ変換する、ブラウザー内で動く無料ツールです。フロントエンド開発者や Web デザイナーが、レイアウトを絶対ピクセルとレスポンシブ単位の間で行き来させたり、カスタムのルートフォントサイズで rem が何ピクセルになるか確かめたり、印刷向けの pt 値を画面のピクセルへ変換したりするのに使います。rem はルートのフォントサイズ、em と % は親要素のフォントサイズ、vw/vh はビューポートに依存するため、この 4 つを調整可能な設定として用意しています。値を入力し、変換元の単位を選ぶと、すべての結果欄が同時に更新されます。生成される CSS スニペットは、7 つの等価値を font-size 宣言として並べ、そのまま貼り付けられます。
CSS 単位変換ツールの使い方
- 「設定」を開き、ルートのフォントサイズ（rem の基準となる html の font-size）、親要素のフォントサイズ（em と % に使用）、ビューポートの幅と高さ（vw と vh に使用）を設定します。
- 変換したい数値を値の入力欄に入力します。
- 「変換元の単位」ドロップダウンから元の単位を選びます：px、rem、em、pt、%、vw、vh。
- ラベル付きの読み取り専用の結果欄で各等価値を確認します。値・単位・いずれかの設定を変更すると、すべて自動で再計算されます。
- 生成された CSS スニペットをコピーすれば、7 つの font-size 等価値をそのままスタイルシートに貼り付けられます。
使用例
ルート 16 のときの px → rem
入力
ルート 16px、値 16、変換元 px
出力
rem = 1
ルート 10 のときの rem → px
入力
ルート 10px、値 2、変換元 rem
出力
px = 20
px → pt
入力
値 16、変換元 px
出力
pt = 12
よくある質問
- どの単位の間で変換できますか？
- 7 つの CSS 長さ単位です：px、rem、em、pt、%、vw、vh。いずれも変換元にでき、7 つの等価値が同時に表示されます。
- なぜルート・親・ビューポートのサイズを設定する必要があるのですか？
- これらの単位は相対的だからです。rem はルート（html）のフォントサイズの倍数、em と % は親要素のフォントサイズに対する相対値、vw/vh はビューポートの幅と高さに対する割合です。設定でこれらを指定すると、各相対単位が何に解決されるかをツールが把握できます。
- pt はどう扱われますか？
- CSS では 96px = 1in = 72pt と定義されているため、1pt は 4/3 px、1px は 0.75pt に相当します。ツールはこの固定比率を使い、フォントサイズやビューポートには依存しません。
- 値や設定が無効だとどうなりますか？
- 値が有限の数値でない場合、またはルート・親・ビューポートのいずれかのサイズが未入力・0・負の場合、有効な数値を入力するまで結果欄はダッシュ（—）を表示します。
- サーバーに何か送信されますか？
- いいえ。すべての変換はブラウザー内で完全にクライアントサイドで実行され、アップロードもサーバー呼び出しも行いません。そのため、入力した値が端末の外に出ることは一切ありません。