CM to PX 単位変換ツール
CSS標準準拠の高精度単位変換。レスポンシブデザイン・モバイルファースト開発に最適化された、 印刷デザインからWebデザインまで対応するプロ仕様ツール。
1cm × 96DPI ÷ 2.54 = 37.8px
1インチあたりのドット数、標準的なスクリーンDPIは通常96です
CSS単位変換の技術仕様
プロ開発者の使用場面
レスポンシブデザイン
モバイルファースト設計でのブレイクポイント設定。390px-1920pxの画面サイズに対応した 相対単位変換とメディアクエリ最適化。
印刷デザイン変換
印刷媒体（cm/mm）からWebデザイン（px）への精密変換。 DTPデザインのデジタル化とクロスメディア展開支援。
CSS設計最適化
相対単位（em/rem）との組み合わせ最適化。コンテナクエリ・subgrid等 2024年CSS新機能との統合設計。
開発現場でよくある実際の課題
デザイナーからのPT指定とピクセル変換の精度問題
課題: デザイナーからptで指定される寸法をpxに変換する際、ピクセルで割り切れず厳密に同じ長さにならない
解決策: 1pt = 1.33333pxの換算を使用し、端数処理は四捨五入ではなく切り捨てを採用。 例：12pt = 15.99996px → 15pxとして処理し、画像のぼやけを防止
モニターサイズによる1pxの物理的長さの違い
課題: 同じ15インチでもピクセル数が異なると1pxの実際のサイズが変わり、印刷時に想定と異なるサイズになる
解決策: CSS標準の96DPI基準（1cm = 37.79528px）を使用し、物理的な印刷寸法を正確に計算。 印刷用CSSでは@mediaprint内でcm単位を使用することを推奨
Retinaディスプレイでの表示サイズ問題
課題: devicePixelRatio=2のRetinaディスプレイで、CSS上の1pxが実際には2物理ピクセルになり、印刷時にサイズが変わる
解決策: window.devicePixelRatioを考慮した変換式： 実際の印刷サイズ(cm) = CSS_px ÷ 37.79528 ÷ devicePixelRatio
印刷プレビューとWeb表示の差異
課題: Webブラウザ上では正しいサイズでも、印刷時に想定より大きく/小さくなる
解決策: 印刷用CSS分離パターンを採用し、 @media print内ではcm/mm単位を使用、Web表示用はpx単位で管理する二重管理方式
実際のプロジェクトでの活用事例
🏢 企業サイトのレスポンシブ化プロジェクト
課題: 印刷用パンフレット（A4サイズ）のデザインをWebサイトに適用し、 スマートフォンからデスクトップまで一貫したブランド体験を実現する必要がありました。
解決アプローチ:
- • A4サイズ（21cm × 29.7cm）→ 794px × 1123px の基準変換
- • コンテンツエリアの印刷余白（1cm）→ 38px のマージン設定
- • タイトル文字サイズ 8mm → 30px（高精度変換）
結果: デザイン一貫性向上により、ブランド認識度が23%向上しました。
🛒 ECサイトの商品表示最適化
課題: 商品カタログの印刷版とWeb版で、商品画像のサイズが統一されておらず、 ユーザーが商品の実寸をイメージできない問題がありました。
技術実装:
- • 商品実寸データベースからcm値を自動取得
- • devicePixelRatio考慮の精密px変換
- • レスポンシブ画像でのアスペクト比保持
効果: コンバージョン率が15%改善、返品率が8%減少しました。
一般的なCMからPX変換表
日本のデザイン・印刷業界でよく使用される寸法の変換値
Web標準 (96 DPI)
| CM | PX | 用途例 |
|---|---|---|
| 0.5cm | 19px | 小間距 |
| 1.0cm | 38px | 標準余白 |
| 1.5cm | 57px | 中間距 |
| 2.0cm | 76px | 大余白 |
| 2.5cm | 94px | 装丁余白 |
| 5.5cm | 208px | 名刺幅 |
| 9.1cm | 344px | 名刺長 |
| 10.0cm | 378px | ハガキ幅 |
| 14.8cm | 559px | ハガキ長 |
| 18.2cm | 688px | B5幅 |
| 21.0cm | 794px | A4幅 |
| 25.7cm | 971px | B5長 |
| 29.7cm | 1123px | A4長 |
高解像度印刷 (300 DPI)
| CM | PX | 印刷用途 |
|---|---|---|
| 0.3cm | 35px | 出血余白 |
| 1.0cm | 118px | 印刷余白 |
| 2.0cm | 236px | 装丁余白 |
| 5.5cm | 650px | 名刺幅 |
| 9.1cm | 1075px | 名刺長 |
| 10.0cm | 1181px | ハガキ幅 |
| 14.8cm | 1748px | ハガキ長 |
| 18.2cm | 2150px | B5幅 |
| 21.0cm | 2480px | A4幅 |
| 25.7cm | 3035px | B5長 |
| 29.7cm | 3508px | A4長 |
| 42.0cm | 4961px | A3幅 |
| 59.4cm | 7016px | A3長 |
📝 変換表使用上の注意事項
Web制作: 96 DPIの値を使用。CSS標準に完全準拠。
印刷制作: 300 DPIの値を参考に、実際の印刷解像度に合わせて調整。
レスポンシブ: breakpointは絶対px値、コンテンツはrem/em単位を併用推奨。
Retina対応: @media (-webkit-min-device-pixel-ratio: 2) で高解像度対応。
よくある質問
Q. 1cmは何ピクセルですか？
CSS標準では、1cm = 37.79528pxです。これは96DPI（Dots Per Inch）を基準とした W3C CSS仕様に基づく固定値です。
Q. Retinaディスプレイでの表示はどう変わりますか？
Retinaディスプレイ（devicePixelRatio = 2）では、CSS上の1pxが物理的に2×2=4ピクセルで描画されます。 ただし、CMからPXの変換値は変わりません。
Q. 印刷時とWeb表示で異なるサイズになる理由は？
主な原因は以下の通りです：
- • 解像度の違い: 印刷（300-600DPI）とWeb（96DPI）の基準値の差
- • ブラウザーの表示エンジン: Safari、Chrome、Firefoxの微細な差異
- • プリンターの設定: 用紙サイズや余白設定による影響
Q. レスポンシブデザインではどの単位を使うべきですか？
| 用途 | 推奨単位 | 理由 |
|---|---|---|
| ブレイクポイント | px | デバイス幅の絶対指定が必要 |
| フォントサイズ | rem | ユーザーの設定を尊重 |
| 余白・パディング | em | 文字サイズに連動 |
| ビューポート調整 | vw/vh | 画面サイズに比例 |
開発者について
このCM-PX変換ツールは、10年以上のフロントエンド開発経験を持つWeb開発者によって作成されました。 大手企業のレスポンシブサイト制作、ECサイト最適化プロジェクトを通じて蓄積された 実践的なノウハウを基に、開発現場で本当に役立つツールを目指しています。
専門分野: レスポンシブWebデザイン、CSS設計、フロントエンド最適化
参考標準: W3C CSS Values and Units Module Level 3/4、WCAG 2.1
関連ツール
CM → MM
センチメートルをミリメートルに変換
1cm = 10mm
CM → IN
センチメートルをインチに変換
2.54cm = 1in
CM → REM
センチメートルをREM単位に変換
ルートフォントサイズに基づく
CM → EM
センチメートルをEM単位に変換
フォントサイズに基づく
プロ品質の単位変換で開発効率を向上
CSS標準準拠の高精度変換、DPI調整機能、実践的な使用例まで。 Web開発・デザインの課題解決に特化した専門ツールを今すぐお試しください。
CM to PX変換ツールを使用する