結果は情報提供のみを目的としており、誤りを含む場合があります。重要な情報は必ずご自身で確認してください。本ツールのご利用は自己責任でお願いいたします。
このツールでできること
CSS単位変換ツールは、長さをpx、rem、em、pt、%の間で変換します。値を入力して単位を選び、基準フォントサイズ（デフォルトは16px。ユーザーが変更しない限りブラウザが使う値です）を設定すると、同じ長さが5つの単位すべてで一覧表示されます。
変換はCSSの仕様に従います。1remはルートのフォントサイズに等しいので、基準が16pxなら1.5remは24pxです。1ポイントは1/72インチ、CSSの1ピクセルは1/96インチなので、12ptは16pxになります。このツールではemと%も同じ基準で計算します。これは、親要素がルートのサイズを使っている要素にフォントサイズを設定した場合と一致します。データがブラウザの外に出ることはありません。
こんなときに使えます
- デザインカンプのピクセル値を
remに変換し、ユーザーのフォント設定に合わせてテキストが拡大縮小されるようにするとき。 - ポイントで指定された印刷用スタイルシートやPDFのデザインを変換するとき。
- 他の人のCSSを引き継いだときに、
%で指定されたフォントサイズが実際にいくつになるかを確認するとき。 - 各段階にきれいな
rem値が必要なタイプスケールを作るとき。
使用例
入力
24px、基準16px出力
px 24.000
rem 1.5000
em 1.5000
pt 18.000
% 150.00%このツールについての質問
フォントサイズにはremとpxのどちらを使うべきですか？
フォントサイズとほとんどの余白にはremを使ってください。読みやすさのためにブラウザのデフォルトフォントサイズを大きくしたとき、remの値はそれに合わせて大きくなりますが、pxの値は固定のままです。
remとemの違いは何ですか？
remは常にルート（html）のフォントサイズが基準です。emは現在の要素のフォントサイズが基準なので、ネストすると掛け算になります。1.2emの中の1.2emは基準の1.44倍です。このツールでは、どちらも入力した基準に対して計算します。
1ptが1pxと等しくないのはなぜですか？
CSSでは1インチが96ピクセルに固定されており、1ポイントは1/72インチなので、1ptは1.333pxになります。つまり、ワープロの12ポイントの文字は、Webの16pxと同じ大きさです。
基準サイズには何を入力すればよいですか？
スタイルシートでルートのサイズを変更していない限り、16を使ってください。たとえばhtml { font-size: 62.5%; }と設定している場合、基準は10pxになります。html要素の実際のフォントサイズを入力してください。
このツールは無料ですか？
はい、無料でご利用いただけます。登録・メールアドレス不要。結果はこのページに表示されます。
結果はどこで確認できますか？
このページでツールを使用すると、結果がここに表示されます。メールで受け取る必要はありません。