CSS単位変換 WEB制作

px / rem / em / % / vw / vh / vmin / vmax / pt の相互変換。base font sizeとviewport指定可。バッチ変換対応。

バッチ変換 (各行を単位変換)

変換結果がここに表示されます

変換対応単位

  • px: 絶対サイズ (1pxはCSSの定義上 0.75pt = 96dpi基準)
  • rem: ルート要素のfont-sizeに対する相対値 (16pxベースなら1rem=16px)
  • em: 親要素のfont-sizeに対する相対値
  • %: 親要素のサイズに対する百分率
  • vw / vh: ビューポート幅/高さの1%
  • vmin / vmax: ビューポートの短辺/長辺の1%
  • pt: ポイント (1pt = 1.333px)

使い方

  • 値+単位を入力すると、他の全単位の値が同時表示
  • Base font size でrem/em の換算基準を変更可能
  • Viewport幅/高 で vw/vh の換算基準を変更
  • 各結果カードクリックでクリップボードへコピー
  • バッチ変換で複数値 (1行1つ) を一括変換

典型的な用途

  • デザインカンプ (px) → 実装 (rem) への単位変換
  • レスポンシブ設計時の vw/vh 計算
  • Tailwind CSS / Bootstrap 等のフレームワーク値検証
  • 印刷スタイル (pt) ←→ Web (px) 換算