PhotoshopやIllustratorで作成したデザインカンプの数値を、Web制作で使うCSS単位（pt / px / rem / em など）に一括変換できるツール

この記事にはアフィリエイトリンクが含まれており、この記事経由で契約すると私に紹介料が入ります。詳しくは　プライバシーポリシーをご覧ください。

Base Size (px): DPI: Parent Size (px):

単位	数値

※数値を入力するとリアルタイムで変換します。

単位変換ツールの使い方ガイド

pt / px / rem / em / % を一括変換

この記事では、ページ内に設置してある単位変換ツールの使い方を解説します。
Web制作や画像制作、印刷物デザインなど、異なる単位を行き来する作業を効率化できます。

🎯 このツールでできること

1つの値を入力するだけで、全単位に自動変換
対応単位：pt / px / rem / em / %
Base Size（remの基準）やParent Size（emの基準）を自由に設定
DPIを変更して、印刷基準（72dpi）やWeb基準（96dpi）に対応

🛠 基本の使い方

数値を入力
ツール上部の入力欄に変換したい数値を入力します。
例：16
単位を選択
右側のプルダウンから、現在の単位を選びます。
例：px を選択
基準値を設定（必要に応じて）

Base Size (px)
remの基準値。通常は html { font-size: 16px; } の16px。
Parent Size (px)
emの基準値。親要素のフォントサイズを指定。
DPI
pt換算の基準。印刷基準なら72、Web基準なら96。

結果を確認
下部の表に、全単位への変換結果がリアルタイムで表示されます。
コピー機能
各行の📋アイコンをクリックすると、その値をクリップボードにコピーできます。

📏 Base Size と Parent Size の違い

Base Size → remの基準（サイト全体のスケーリングに影響します）
Parent Size → emの基準（コンポーネント単位の相対サイズに影響します）

🖋 72dpiと96dpi

長年DTPや画像制作をしてきた方にはおなじみの 72dpi。  
これは初期Macintoshが「1pt＝1px」に見えるように画面解像度を72ppiに設定したことに由来します。  
印刷の1pt＝1/72インチという物理単位と揃えるためです。

一方、96dpiはWindowsやWebブラウザの論理的な基準値。  
W3CのCSS仕様では「1in = 96px」と定義されており、`pt`や`in`をpxに換算する際はこの値が使われます。  
つまり：
- 画像制作や印刷 → 72dpi基準が主流
- Web/CSSの単位換算 → 96dpi基準（物理dpiとは別の論理値）

さらにiPhoneやMacBookのRetinaディスプレイでは、CSSピクセル1個を物理ピクセル2個（または3個）で描画します。  
これを HiDPI / Retina対応 と呼び、実寸の2倍〜3倍の画像を用意することで高精細表示が可能になります。

72dpi: 初期MacintoshやDTP（印刷物制作）での基準。
1pt＝1pxに見えるように設計され、印刷の1pt＝1/72インチと一致します。
96dpi: WindowsやWebブラウザの論理的基準。
CSS仕様では「1in = 96px」と定義され、ptやinをpxに換算する際に使われます。
Retina / HiDPI: iPhoneやMacBookなどの高解像度ディスプレイでは、CSSピクセル1個を物理ピクセル2〜3個で描画します。
高精細表示のため、実寸の2倍〜3倍の画像を用意するのが一般的です。