CSSユニット変換の使い方

CSSユニットを変換する前に

このCSSユニット変換ツールは、数値をpx、em、rem、%、vw、vh、pt、cm、mm、inの間で換算するために使います。文字サイズや余白などの値を別の単位で確認したいときに、変換元と変換先、基準サイズ、ビューポート寸法を指定して利用できます。

変換の手順

1. 数値を入力します。数値を省略した場合は16として扱われます。
2. 変換元の単位と変換先の単位を指定します。対応する単位はpx、em、rem、%、vw、vh、pt、cm、mm、inです。単位を省略すると、変換元はpx、変換先はremになります。
3. emやrem、%を使う場合は基準サイズを入力します。省略時は16です。vwまたはvhを使う場合は、ビューポートの幅と高さも必要に応じて指定します。初期値は幅1920、高さ1080です。
4. 変換を実行し、表示された変換結果を確認します。計算では、まず入力値をピクセル相当値に換算してから、指定した単位へ換算します。

結果の読み方と注意点

成功した結果では、変換後の値と途中で使われたピクセル相当値が小数点以下4桁に丸められます。基準サイズが0の場合、em、rem、%への変換結果は0です。vwまたはvhへの変換で対応するビューポート寸法が0の場合も、結果は0になります。

単位名は小文字として扱われます。認識されない変換元の単位は、入力値がすでにピクセル値であるかのように処理され、認識されない変換先の単位ではピクセル相当値がそのまま残ります。そのため、単位は対応一覧から選び、入力後の結果が意図した単位のものか確認してください。

使用例

基準サイズ16のデザインで、16pxの文字サイズをrem表記に置き換えたい場合です。

数値に16、変換元にpx、変換先にrem、基準サイズに16を指定して変換します。

変換後の値は1.0となり、途中のピクセル相当値も含めて小数点以下4桁に丸められた成功結果が表示されます。

制限事項

• 未認識の単位は拒否されず、ピクセル相当値を基準に処理されます。また、基準サイズや対応するビューポート寸法が0の場合、一部の変換結果は0になります。

よくある間違い

• 対応一覧にない単位を入力すると、エラーとして拒否されず、変換元ではピクセル値として、変換先ではピクセル相当値のまま扱われます。px、em、rem、%、vw、vh、pt、cm、mm、inのいずれかを小文字で指定してください。

よくある質問

入力を省略した場合の既定値は何ですか？

数値を省略すると16、変換元を省略するとpx、変換先を省略するとremになります。基準サイズは16、ビューポート幅は1920、高さは1080が使われます。

em、rem、%を変換するときに基準サイズは必要ですか？

emとremの入力値は基準サイズを掛け、%は基準サイズを掛けて100で割ります。vwはビューポート幅、vhはビューポート高さを基準に換算します。

対応していない単位を入力するとどうなりますか？

対応一覧にない単位も処理されますが、変換元では入力値をピクセル値として扱い、変換先ではピクセル相当値を変更しません。対応単位を使うと、意図した換算結果を確認しやすくなります。