CSS単位コンバーター
文字サイズ、線幅、radius、余白、レイアウト幅、影まで、CSSで使う値にまとめて変換します。
基準入力
ルートの基準サイズとビューポートを合わせて、CSSの長さ単位を比較します。
rem・em・%の基準です。多くのブラウザでは通常16pxです。
結果パネル
基準値、相対単位、ビューポート単位、絶対単位を同じ画面で確認します。
font-size: 0rem;プロパティ別テンプレート
各カードでサイズと単位を個別に指定できます。空欄なら左の変換値を使います。
font-size: 0rem;line-height: 0;border-width: 0px;border-radius: 0rem;padding: 0rem;width: clamp(0rem, 0vw, 0rem);inset: 0rem;box-shadow: 0 0 0 currentColor;プレビュー
文字、ボーダー、radius、余白、gapの見え方を貼り付け前に確認します。
基準の文字
変換値を入力してください
CSS単位変換ガイド
pxの数字は、基準が分かって初めて同じ大きさとして読めます
このコンバーターは、入力値をいったんpxに換算してから、rem、em、%、vw、vh、vmin、vmax、CSSの絶対単位まで同じ画面で比較するツールです。font-sizeだけでなく、line-height、border-width、radius、padding、gap、width、box-shadowに貼り付けやすいCSS宣言も確認できます。
まず基準フォントサイズと現在の単位を合わせます
このツールは計算ボタンを待つタイプではありません。基準フォントサイズ、変換する値、単位、ビューポート、CSSプロパティを変えるたびに、結果カード、テンプレート、プレビューがすぐ更新されます。
- 基準フォントサイズをプロジェクトのルートサイズに合わせます。多くのブラウザでは16pxが標準ですが、10pxや14pxで設計している場合は先にここを変えます。
- 変換する値と現在の単位を入力します。pxだけでなく、rem、em、%、vw、vh、vmin、vmax、in、cm、mm、pt、pcから始められます。
- ビューポート幅と高さを確認したい画面に合わせます。vw、vh、vmin、vmaxはこの2つの値で変わります。
- CSSプロパティを選び、結果パネルやプロパティ別テンプレートを読みます。必要な宣言はCSSコピーまたはカードごとのコピーで移せます。
rem、em、%、vw、vhは見ている基準が違います
同じ24pxでも、どの単位で書くかによって後から伸びる条件が変わります。ルートの文字サイズに合わせたいならrem、コンポーネントの内側で親のサイズに合わせたいならem、画面幅や高さを基準にしたいならビューポート単位を確認します。
px
CSSの長さを直接扱う基準値です。ツールはまずすべての入力をpxへ換算し、そこから各単位へ戻します。
rem · em · %
入力した基準フォントサイズを使って計算します。実際のCSSではremはルート、emは周辺の文字サイズ、%はプロパティごとの相対基準を見ます。
vw · vh · vmin · vmax
ビューポートの幅と高さを基準にします。スマホのアドレスバーや画面の向きで体感が変わるため、実画面で再確認します。
絶対単位と近似単位
in、cm、mm、pt、pcはCSSの絶対長の関係に従います。ch≈とex≈はフォント差が大きいため、早見用の近似値として扱います。
計算はいったんpxに直してから各単位へ戻します
入力単位が何であっても、まずpx値に変換します。その後、基準フォントサイズ、ビューポートサイズ、CSSの絶対長の関係で割り戻します。基準フォントサイズやビューポートが違えば、rem、%、vw、vhの結果もずれます。
24pxの例は font-size: 1.5rem と読めます
基準フォントサイズを16pxにして24pxを入力すると、結果は24px、1.5rem、1.5em、150%になります。ビューポートが1366×900なら、同じ値は約1.757vw、2.6667vhとしても表示されます。
プレビューは大きさの感覚を見るためのものです
プレビューは、パネル内で読めるように極端に小さい値や大きい値を画面内に収めます。CSSを貼り付けた後は、実際のフォント、親要素、レスポンシブのbreakpointで確認してください。
コピーする前に基準をもう一度見ます
単位変換は数字をそろえる作業ですが、最終的な見え方は親要素、フォント、ビューポート、プロパティごとの相対基準にも左右されます。
- emはネストの影響を受けます。カード内のボタンのように親の文字サイズが変わる場所では、remより予測しづらいことがあります。
- %はプロパティごとに基準が違います。font-sizeの150%とwidthの150%は、同じ対象を見ているわけではありません。
- vwとvhはモバイルで体感が変わります。ブラウザUIや画面の向きによって、使えるビューポートが変わります。
- 絶対単位は物理的な定規ではありません。CSS pxとの関係を基準にした換算なので、印刷や実測には別の確認が必要です。
よくある質問
基準フォントサイズは16pxのままでよいですか？
ブラウザ標準のルートサイズを使う一般的なページなら16pxで問題ありません。htmlのフォントサイズを10pxや14pxにしているプロジェクトでは、ツール側の基準も同じ値に変えてから結果を読みます。
remとemの数値が同じに見えるのはなぜですか？
このツールでは入力した基準フォントサイズで2つの値を並べて計算します。実際のCSSではremはルート、emは現在の要素や親要素を基準にするため、コンポーネント内では挙動が変わることがあります。
vwとvhは画面サイズを変えたら見直すべきですか？
はい。vwはビューポート幅、vhはビューポート高さを基準にするため、モバイル、デスクトップ、画面の向きで体感が変わります。
ch≈とex≈に近似記号が付くのはなぜですか？
chとexは実際のフォントの字幅やx-heightに左右されます。このツールでは早く比較するために基準フォントサイズの半分を近似値として使っているため、最終確認は実フォントで行います。