px を rem や em に簡単に変換できる CSS ユニット計算ツールです。 レスポンシブデザインや可読性向上に役立ちます。
Pixel
Root EM
EM
Percent
V-Width
V-Height
Quick Presets
数値を変更すると全単位を自動換算。 右上のコピーボタンで単位付きコードを取得できます。
CSS ユニット変換ツールとは？
本ツールは、Webデザインやコーディングにおいて重要なpx（ピクセル）と、rem、em、vw、vhなどの相対単位を相互に一括変換できる高機能計算ツールです。 基準となるフォントサイズ（Base Size）やビューポートの大きさを自由にカスタマイズできるため、最新のレスポンシブデザイン手法に則った正確な値を即座に算出できます。
こんなシーンで便利です
レスポンシブデザインの実装
固定値（px）を相対値（rem）に変換し、ブラウザ設定に応じて文字サイズが可変するアクセシビリティに配慮した設計に役立ちます。
Figmaからのコーディング
デザイン上のpx値を貼り付けるだけで自動計算。手計算によるミスを防ぎ、作業スピードを加速させます。
Fluid Typography
vw（Viewport Width）を使用した流動的なサイズ指定も、基準幅を入力するだけで瞬時にシミュレーションが可能です。
UIパーツの設計
親要素に応じた em 値の算出など、コンポーネント指向のスタイル設計に必要な細かい数値計算をサポートします。
使い方は簡単 4ステップ
- 「基準フォントサイズ（通常は16px）」を設定します。
- px や rem など、手元にある数値をいずれかの入力欄に打ち込みます。
- 他の全単位が同期して表示されるので、右上のコピーボタンでCSSコードを取得します。
- 必要に応じて Viewport（画面幅・高さ）を変更し、vw/vh の変動を確認します。
※Viewportを変更すれば、vw/vh の値もリアルタイムに反映されます。
ご利用時の注意点
- rem と em の違い：rem は root em の略で html 要素を基準にします。em は親要素を基準にするため注意してください。
- 丸め処理：計算結果は小数点第4位まで表示されます。必要に応じてコピー後に調整してください。
- ブラウザの最小サイズ：多くのブラウザでは 10px 以下のフォントサイズは正しく表示されない場合があるためご注意ください。
PX・REM・EM 変換早見表（基準16px）
一般的なブラウザのデフォルトサイズ（16px）を基準とした変換一覧です。
| ピクセル (px) | レム (rem / em) | 使用シーンの目安 |
|---|---|---|
| 10px | 0.625rem | 注釈・非常に小さなテキスト |
| 12px | 0.75rem | 補足説明・キャプション |
| 14px | 0.875rem | 標準的なサブテキスト |
| 16px | 1rem | ブラウザ標準・本文（Base） |
| 18px | 1.125rem | やや大きめの本文・リード文 |
| 20px | 1.25rem | 小見出し・カードタイトル |
| 24px | 1.5rem | h3 相当の見出し |
| 32px | 2rem | h2 相当の見出し |
| 40px | 2.5rem | h1 相当・ヒーローセクション |
| 48px | 3rem | 特大タイトル・バナー |
| 64px | 4rem | デザインアクセント |
【レスポンシブ対応のポイント】
現代のWeb制作では、アクセシビリティの観点からフォントサイズを rem で指定することが推奨されます。 これは、ユーザーがブラウザ設定で文字サイズを変更した際に、レイアウトが適切に追従するためです。
【vw・vh（ビューポート単位）の活用】vw (Viewport Width) は画面幅を基準にするため、Fluid Typography（流動的タイポグラフィ）の実装に最適です。 例えば calc(1rem + 1vw) のように指定することで、デバイスサイズに応じて滑らかに変化する文字サイズを実現できます。
【デザインツールとの連携】
FigmaやAdobe XDで作成されたデザインデータは通常 px 単位です。 コーディング時に本ツールを使用することで、16px基準だけでなく、プロジェクトごとの独自基準（10pxベース等）に合わせた変換も一瞬で行えます。
モダンなコンポーネント設計とデザインシステム構築を支えるCSS相対単位の高度な運用手法
単なるピクセル変換を超えて、再利用性の高いコンポーネント設計や、Tailwind CSSをはじめとするモダンなフロントエンド開発環境に変換数値を最適に組み込むための実践的な実装アプローチを解説します。
コンポーネント指向設計におけるem単位を活用した余白とフォントサイズの連動カプセル化
ボタンやバッジなどのUIパーツを異なる画面サイズで使い回す場合、マージンやパディングにem単位を採用することでメンテナンス効率が劇的に向上します。
なぜなら親要素のfont-sizeを変更するだけで、内部のパディングやアイコンサイズが同一の比率を維持したまま自動的に伸縮（スケーリング）する堅牢なカプセル化が実現できるからです。
コンポーネント単体の表示ロジックを独立させる際は、ルートを基準とするremではなく、本ツールで算出したem値をコンポーネントのローカル余白へ局所的に割り当てる設計が推奨されます。
Tailwind CSSのカスタム構成における独自スペーシングスケールと相対単位の最適化
デザインシステムをコードに落とし込む際、Tailwind CSSの「tailwind.config.js」をプロジェクト独自のpx基準値からremベースへと拡張・上書きする定義作業が必要になります。
Tailwindの標準仕様では1ユニットが0.25rem（4px相当）として設計されているため、デザインカンプに頻出する中間的なピクセル数値をそのまま適用するとバグの原因になります。
本ツールで算出された小数点第4位までの厳密なrem値を「theme.extend.spacing」や「theme.extend.fontSize」にプラグイン形式で事前マッピングしておくことで、開発チーム全体のスタイリング乖離を防げます。
メディアクエリのブレイクポイント指定におけるpx単位とem単位の選定基準とアクセシビリティ
レスポンシブの境界線となる「@media」の条件式には、固定のpxではなくem単位によるブレイクポイント指定を検討してください。
なぜならユーザーがブラウザの文字サイズやズーム倍率を200%などの極端な設定に変更した際、px固定のメディアクエリではデザインの切り替わりタイミングが追従できず、テキストがコンテナを突き破る致命的なバグを誘発するからです。
一般的な画面幅である768pxや1024pxを本ツールを介して48emや64emへと変換し、メディアクエリの記述を相対化することで、あらゆる閲覧環境においてレイアウト崩れが起きない高いアクセシビリティを確保できます。
よくある失敗と対策
ルート要素（html）の基準フォントサイズ指定ミスによるレイアウト崩れ
CSSコーディングにおいて、ブラウザ標準の16pxではなく「html { font-size: 62.5%; }」等の指定（10px計算化）を行っているにもかかわらず、基準サイズ（Base Size）をデフォルトの16pxのまま計算して数値をrem・em変換してしまい、コーディング画面とブラウザ上の表示倍率が大幅にずれる失敗です。
💡 対策・解決策を見る▼
emとremの仕様混同による、ネストされた子要素（コンポーネント）の文字サイズ肥大化
root要素を基準にする「rem単位」の感覚で、親要素を基準とする「em単位」を多重ネストされたUIパーツのmarginやpadding、font-sizeに指定した結果、入れ子構造が深くなるにつれてフォントサイズや余白が掛け算式に拡大・縮小してしまい、レスポンシブ崩れを引き起こす典型的なマークアップミスです。
💡 対策・解決策を見る▼
Fluid Typography（流動的タイポグラフィ）でvw単位のみを単体指定した文字の縮小バグ
画面幅（Viewport Width）に合わせて文字サイズを可変にするため、「font-size: 4vw」のようにvw単位のみでフォントを固定指定した結果、iPhoneなどのスマートフォン端末やモバイル表示において文字が視認できないほど極端に縮小し、GoogleのMobile Usabilityエラー（文字が小さすぎて読めません）を検知される失敗です。
💡 対策・解決策を見る▼
ブラウザの最小フォントサイズ制限を無視した、極小pxからremへの変換ミス
Google ChromeやSafariなどの多くのWebブラウザにはセキュリティおよびアクセシビリティの観点から「最小フォントサイズ制限（一般的には10px〜12px）」が設定されています。ツール上の計算結果として「0.5rem（8px相当）」などを算出してそのままCSSコードに貼り付けても、ブラウザ側の仕様で10px未満に縮小されず、デザインカンプと実画面にギャップが生まれる原因になります。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.計算ツールに入力した数値やデザインデータが外部に漏洩することはありますか
A. 一切ありません。当ツールの単位変換処理はすべて利用者のデバイス上であるブラウザ内で完結する完全ローカル処理型です。入力された数値や設定データが外部のサーバーへ送信されたりデータベースに保存されたりすることは一切ないため、未公開の開発プロジェクトでも安全に利用できます。
Q.remとemの計算結果に違いがあるのはなぜですか
A. 計算の基準となる要素が異なるためです。remはルート要素であるhtmlのフォントサイズを基準に一律で計算されますが、emは配置する親要素のフォントサイズを基準にして計算されます。当ツールでは双方の単位がそれぞれ何ピクセルに相当するかを横並びで確認できます。
Q.16px以外のフォントサイズをベースにしたプロジェクトでも使えますか
A. はい、使えます。基準フォントサイズの設定欄数値を自由に変更できる仕様となっているため、html要素に特定の指定を行っているコーディング環境や、プロジェクト独自のベースデザインシステムが設定されている場合でも正確な相対単位を算出できます。
Q.画面幅に応じたvwやvhの変換数値を変更することはできますか
A. はい、可能です。ビューポートの設定項目から画面の幅や高さを任意の数値へ変更することで、対象のピクセル数が指定画面幅において何vwまたは何vhに相当するかをリアルタイムに同期して計算し直すことができます。
Q.ツールで計算された変換結果の数値はコピーしてそのまま使えますか
A. はい、そのまま利用できます。各単位の計算結果の横に同期して表示されるコピー機能を利用することで、小数点第4位まで算出された厳密な数値をクリップボードへ保存し、テキストエディタのスタイルシートに直接貼り付けることができます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。