メインコンテンツへスキップ
Online Ruler Plus

技術リファレンス · ディスプレイ光学 & W3C CSS単位 · 2026年11月更新

完全スクリーン・キャリブレーション & PPI 計測ガイド

抽象的なW3C 96-PPI CSSピクセルと、実機パネルの物理ミリメートル画素ピッチのギャップを理論と実務から解説します。

Section 01 · ピクセル計算式

物理PPIとCSSピクセルの違いは何ですか?

物理PPIはパネル固有値 (√(W² + H²) / diagonalInches) ですが、CSSピクセルはW3C規定の論理単位 (1/96 CSSインチ = 3.7795 px/mm) です。HiDPI環境では devicePixelRatio が掛かるため、本ツールは pxPerMm とズーム不変の物理密度 devicePxPerMm = pxPerMm × dpr を管理します。

Section 02 · 物理標準規格

なぜISO/IEC 7810 ID-1カードが較正に最適なのですか?

世界中のクレジットカードや身分証はISO/IEC 7810:2019 ID-1規格により厳密に 85.60 × 53.98 mm に統一されています。画面枠と一致させることで pxPerMm = cardWidthPx / 85.60 がOS倍率やEDID誤差を回避して直接求まります。

Section 03 · 目盛り算出

mm目盛りと1/16″分数目盛りはどう計算されますか?

NIST/BIPM定義 (1 in = 25.4 mm厳密値) に基づき、cm / mm は1.0 mm・5.0 mm・10.0 mm刻み、インチは25.4 mmを1.5875 mm単位で16等分して描画します。

Section 04 · 補助確認基準品

硬貨・紙幣・用紙サイズでの検算

USペニー 19.05 mm (3/4″)、1ユーロ硬貨 23.25 mm、USクォーター 24.26 mm、単3電池 50.50 mm、ISO A4短辺 210.0 mm、1円玉 20.00 mmなどでいつでも検算できます。

Section 05 · ズーム・マルチモニター保持

ブラウザズームや外部モニター移動時の挙動

較正値 devicePxPerMm をディスプレイ解像度署名ごとに localStorage へ保存し、ズーム変化時は自動追従、別モニター移動時は通知バナーで知らせます。

Section 06 · 計算実例 & HiDPIマトリクス

CSS PPI・物理PPI・devicePxPerMm の関係

100%ズーム時のCSS解像度にピタゴラス対角式を適用すると CSS px/mm が得られ、window.devicePixelRatio を掛けると不変の devicePxPerMm になります。

ディスプレイ・OS倍率別の算出密度表

ディスプレイ構成CSS解像度実効CSS PPICSS px/mmdevicePxPerMm
14.2" MacBook Pro (Retina / 2× DPR)1512 × 982 CSS px (DPR 2.0)5.000 CSS px/mm10.000 device px/mm
15.6" Windowsノート (125%拡大)1536 × 864 CSS px (DPR 1.25)4.448 CSS px/mm5.560 device px/mm
24" 1080p モニター (100%)1920 × 1080 CSS px (DPR 1.0)3.614 CSS px/mm3.614 device px/mm
27" 4K UHD モニター (150%拡大)2560 × 1440 CSS px (DPR 1.5)4.283 CSS px/mm6.425 device px/mm
6.1" OLED スマホ (3× DPR)390 × 844 CSS px (DPR 3.0)6.000 CSS px/mm18.000 device px/mm

OSスケーリングの注意点

カード較正が対角線入力より優れる理由

Windowsの125%/150%拡大やmacOSのスケーリング解像度下では仮想フレームバッファが介在するため、公称対角インチ値とズレる場合があります。実物85.60 mmカードによる直接合わせが最も確実です。

スマホ狭幅対応

モバイル端末で縦向きカード較正 (53.98 mm) を使う理由

スマホ縦持ち幅は約58〜72 mmしかなく横カード(85.60 mm)がはみ出します。縦向きカードモードで短辺 53.98 mm に合わせることで高精度に較正できます。

Windows 125%/150% & Android Chrome

Windows拡大設定ノートPCとAndroid端末の校正方法

125%や150%のClearType拡大を使うWindows 10/11ノートPCやAndroid Chrome(幅約360〜412 CSS px)では、ブラウザ倍率を100%に保ち、Androidでは縦向きカードモード(53.98 mm)を選んで実物カードと合わせてください。

Section 07 · 表示物理と誤差限界

表面ガラス視差と実用的許容限界

保護ガラス厚 (0.5〜1.5 mm) と屈折率 (n ≈ 1.5) により、30°斜めから見ると約0.3〜0.5 mmの視差ズレが生じます。

目盛りとガイド線の直上90°から読み取ることで再現性を最大化できます。±0.25 mm以下の厳密公差には校正済みノギスをお使いください。

実寸検証用 国際規格物品一覧表

較正完了後、以下の規格品を画面に軽く当てて一致を確かめられます:

基準物品ミリ (mm)インチ (in)準拠規格
ISO/IEC 7810 ID-1 カード (幅)3.370 inISO/IEC 7810:2019 ID-1
ISO/IEC 7810 ID-1 カード (高さ)2.125 inISO/IEC 7810:2019 ID-1
US 1セント硬貨 (直径)0.750 in (3/4″)米国造幣局規格
US 5セント硬貨 (直径)0.835 in米国造幣局規格
1ユーロ硬貨 (直径)0.915 in欧州中央銀行
US 25セント硬貨 (直径)0.955 in米国造幣局規格
2ユーロ硬貨 (直径)1.014 in欧州中央銀行
単3乾電池 (全長)1.988 inIEC R6 / ANSI 15
米ドル紙幣 (幅)6.140 in米国製版印刷局
ISO 216 A4用紙 (短辺)8.268 inISO 216 用紙規格

校正ブループリント

実寸校正の仕組みをステップで理解

96 PPI 既定値がモニター間でずれる理由と、1枚のカードで正確になる仕組みを図解します。

測定の動きを視覚的に確認

アニメーション再生中
(0, 0) DATUM ANCHORISO ID-1 Card85.60 × 53.98 mmTRUE-SCALE LOCKMatch right edge flushwith physical card1 px/mm calibrated

ISO/IEC 7810 ID-1 カードを左上基準 (0, 0) に合わせ、右端ハンドルを実寸枠に揃えます。

85.60 × 53.98 mm

クレジットカード&カスタム基準校正

FIG. 02 · 実寸校正
ISO/IEC 7810 ID-1 カード (85.60 x 53.98 mm) を原点 (0,0) に合わせた図と視差エラー防止図。
標準カード (85.60 × 53.98 mm) 等を使い、90°正面から見て視差(パララックス)誤差を防ぎます。

画面 DPI/PPI と実寸精度の関係

FIG. 09 · 表示物理
同じ 378 CSS px が 81.6 PPI モニターでは 11.76 cm、141.2 PPI ノートでは 6.80 cm、校正後は 10.00 cm になる比較図。
未校正ブラウザは一律 96 PPI 前提のため、ディスプレイにより最大 32% の実寸誤差が生じます。