CSS単位変換ツール

CSS単位変換ツールについて

px・rem・em・%・pt・vw・vhのいずれかで値を入れると、選んだ単位に換算します。基準値は自分で設定します。ルート(html)の文字サイズがremの基準、親要素の文字サイズがemの基準、コンテナサイズが%の基準、ビューポートの幅・高さがvw・vhの基準です。初期値はそれぞれ16px、16px、100pxで、ビューポートは今のウィンドウサイズが入ります。ptは1pt = 4/3pxで固定です。単位を省くとpxとして扱います。

計算は掛け算一回ですが、何を基準にするかで結果は大きく変わります。特に%はプロパティごとに基準が違い、pxは名前に反して画面の物理ピクセルではありません。

CSSのpxは画面の画素ではない

CSS Values and Units仕様はpxを「参照ピクセル」で定義しています。96dpiの機器を腕の長さの距離で見たときの1画素の視角で、腕の長さを28インチとすると約0.0213度です。つまりCSSのpxは長さより角度に近い単位で、遠くから見るテレビでは物理的に大きく、手に持つスマートフォンでは小さく描かれるのが仕様の意図です。

ブラウザはこれをデバイスピクセル比で実現します。比が3のスマートフォンでは、CSSの1pxが物理画素3×3個で描かれます。仕様は1in = 96px、1in = 2.54cmと固定しているため、CSSで1cmと書いても画面に定規を当てると正確に1cmにならないのが普通です。

remとem:何に掛けるのか

remはルート要素のfont-size、emはその要素自身のfont-sizeが基準です(font-sizeプロパティの中で使ったemだけは親の文字サイズが基準)。このツールの「親の文字サイズ」欄は、よくあるfont-sizeでのemを計算するものです。

emは入れ子で掛け算されます。font-size: 1.2emのリストを3段入れ子にすると16 × 1.2 × 1.2 × 1.2 ≈ 27.6pxになります。remは常にルートだけを見るので累積しません。一方、ボタンのpaddingをemで指定すると、文字が大きくなったとき余白も一緒に広がります。

remを使う最大の理由はアクセシビリティです。利用者がブラウザの既定文字サイズを16pxから20pxに上げると、remの文字は追従し、pxで固定した文字は変わりません。

%の基準はプロパティで違う

このツールは%を「コンテナサイズ」一つに対する割合として計算します。実際のCSSでは、width・left/rightは包含ブロックの幅、heightは包含ブロックの高さ、paddingとmarginは上下も含めて包含ブロックの「幅」、font-sizeは親の文字サイズ、line-heightは要素自身の文字サイズ、translate()は要素自身の大きさが基準です。どの値をコンテナ欄に入れるか判断してください。

印刷単位では、仕様上1pt = 1/72in、1in = 96pxなので1pt = 4/3px、12pt = 16pxです。ワープロの12ptがWebの既定16pxと同じ大きさになるのはこのためです。単位でptを選ぶか12ptのように入力すれば、そのままpxやremに換算されます。

例

使い方

1. ルート文字サイズ、親の文字サイズ、コンテナサイズ、ビューポートの幅・高さを実際の値に合わせます。
2. 単位付きで値を入力します(単位なしはpx)。
3. 変換先の単位を選び、結果を確認してコピーします。

よくある質問