CSS単位変換ツール: CSSの長さ単位をオンライン変換
CSS単位変換ツールは、CSSの長さの値を対応単位間で変換します。pxやremからビューポート単位や物理単位まで対応します。ユースケースに合わせて相対値や物理値を解決できるよう、ルートフォントサイズ、親フォントサイズ、ビューポート、DPIのコンテキストを設定します。1つの値を変換して同等の表現を表示したり、「convert all in CSS」を使って貼り付けたスタイルシートの長さを1つの対象単位に書き換えたりできます。
CSS単位変換ツールは、CSSの長さの値を対応単位間で変換するブラウザベースのCSS単位変換ツールです。px、rem、em、pt、pc、in、cm、mm、Q、vw、vh、vmin、vmax、%、ch、exなどの単位を扱います。値を1つずつ変換することも、「convert all in CSS」を使って貼り付けたスタイルシートの長さを対象単位に書き換えることもできます。
変換では設定可能なコンテキストを使います。ルートフォントサイズ、親フォントサイズ、ビューポート、DPIです。CSS単位はすべて同じように解決されるわけではないため、これらの設定は重要です。たとえばremとemはフォントサイズのコンテキストに依存し、ビューポート単位はビューポートの寸法に関係し、物理単位はDPIコンテキストを使います。結果に特定のコンテキストを反映させたい場合は、変換前に関連する値を設定しましょう。
CSSの長さ単位はサイズと距離を異なる方法で表します。px、pt、cm、inなどの単位は長さの異なる表現を提供し、rem、em、vw、vhなどの単位はフォントやビューポートのコンテキストに依存します。これらを変換することで、スタイルシートや別のツールが特定の単位を期待する場合に、値の比較、再利用、適応がしやすくなります。
CSS単位変換ツールは完全にブラウザ上で動作します。入力はデバイス上で処理され、サーバーに送信されません。ページの読み込み後はサーバー依存なしでツールがオフライン動作します。これにより、スタイルシートをアップロードせずにCSS値を変換したい場合に便利です。
このツールは、CSSの長さを確認、比較、書き換えたい開発者やDevOpsエンジニア向けに設計されています。単一の値を確認する場合でも、貼り付けたスタイルシート全体の長さを更新する場合でも、設定可能なコンテキストと単位変換によりタスクに合った表現を得られます。
手順1: CSSの長さの値を入力または貼り付けます。長さをまとめて変換したい場合はスタイルシートを貼り付けます。
手順2: 単一値の変換では変換元と変換先の単位を選びます。
手順3: それらの値に依存する単位を解決するため、ルートフォントサイズ、親フォントサイズ、ビューポート、DPIなどの関連コンテキストを設定します。
手順4: スタイルシートの場合は「convert all in CSS」モードに切り替え、CSSの長さの対象単位を選びます。
手順5: 変換後の表現を確認し、必要な値やスタイルシートをコピーします。
用途: 手作業で再計算する代わりに、CSSの長さを別のツールやシステムが期待する単位に変換できます。
用途: 対応単位や基準での同等値を一度に表示して、CSS値を確認できます。
用途: 一貫性のある表現が必要な場合、貼り付けたスタイルシートの長さを1つの対象単位に書き換えられます。
用途: 変換に使うルートまたは親フォントサイズを設定して、remやemの値を他の単位と比較できます。
用途: CSS値が特定のビューポートとどう関係するか確認する際に、ビューポートコンテキストでビューポートベースの長さを解決できます。
用途: 計算に関連するDPIコンテキストを使って、cmやinなどの物理的なCSS長さを変換できます。