mm ⇄ px変換

mm to px Converter

ミリメートル（mm）とピクセル（px）の単位を、DPI（解像度）に基づいて正確に相互変換するツールです。たとえば、印刷用データのレイアウトで「最適な画像サイズは何pxなのか」を確認したり、「この画像サイズでは何mmまで大きくしていいのか」など、さまざまな用途に使用できます。72dpi、300dpi、600dpiなどの一般的な解像度はもちろん、カスタムDPIにも対応しており、自由な設定が可能です。変換したい値とDPIを入力するだけで、リアルタイムに結果が表示されるため、手計算や表を使う手間が不要になります。

コラム・豆知識
ツールの仕組み解説

印刷媒体のDPIを選択

変換の種類 mm → px px → mm

数値を入力 mm 計算結果

コピー

コラム・豆知識

pxとmmの変換はなぜ必要か？

Web制作においては基本的にpx（ピクセル）を単位として扱いますが、印刷物や実寸サイズとの整合性を取る場合はmm（ミリメートル）との変換が必要になる場面が多く存在します。
たとえば、Web上で印刷用レイアウトを調整する、UI上で実寸の再現性を検証する、あるいはDTPとの連携を意識したデザインを行う際など、px↔mmの変換知識が求められます。
単なる単位の違いではなく、表示環境や解像度の設定によって実際の表示サイズが変わるため、ピクセルとミリの関係を正確に理解することが重要です。

DPIの意味とWeb制作での役割

DPI（dots per inch）は、1インチあたりのドット数を示す解像度の単位です。
この値が変わることで、1mmが何ピクセルに相当するかも変わってきます。
たとえば、96dpiであれば、1インチ（25.4mm）は96ピクセルなので、1mm ≒ 3.78pxになります。
しかし、300dpiのような印刷用途では同じmmでも必要なピクセル数が大幅に増えます。
つまり、DPIの指定がなければ、mmとpxの正確な変換はできません。Web制作者がDPIを意識することで、印刷物との整合性や高解像度デバイスへの対応がスムーズになります。

デバイスごとのピクセル密度の違い

スマートフォンや4Kモニター、レティナディスプレイなど、高解像度デバイスでは1ピクセルの物理的サイズが非常に小さくなっています。
そのため、実際のサイズに近い見た目を再現したい場合、単純にpxで調整するだけでは不十分です。
このようなデバイスでは、CSSのmedia queryやdevicePixelRatioなどを駆使し、表示密度に合わせた処理を行う必要があります。
しかし、mm→px変換の際にDPIを考慮すれば、より現実に近い表示シミュレーションが可能になります。

印刷やPDF生成を意識した設計にも有効

ブラウザ上でPDFを生成する場合や、Webページを印刷するレイアウトを設計する際には、物理的な寸法単位であるmmを基準に設計するのが一般的です。
その際、mmで指定したサイズを正確にpxに変換して、CSSに反映することで、印刷結果にズレのないデザインが実現できます。
また、@media printのようなCSSルールと合わせて使うことで、ピクセルベースのWebデザインを印刷メディアに最適化することが可能です。

CSSでのmmとpxの扱いの注意点

CSSではmmやcmといった物理単位がサポートされていますが、これらはユーザーのデバイスやOSの設定により、必ずしも正確な物理寸法としてレンダリングされるわけではありません。
たとえば、ブラウザのズームやデバイスのスケーリング設定がある場合、1mmが本来の1mmとして表示されないケースも多く存在します。
そのため、厳密なサイズ指定が必要なときには、DPIを前提としたmm↔px変換を自前で行うことが推奨されます。
Web制作で物理サイズを扱う際には、この仕様上の違いを理解し、補完的にmm→px変換を利用することが現実的なアプローチと言えるでしょう。

ツールの仕組み解説

input.addEventListener('input', convert);

ここでは、テキストボックスに数値を入力したときにconvert関数を呼び出す設定をしています。ユーザーの操作に応じて、リアルタイムで結果を更新する仕組みです。

function getDpi() {
	if (dpiSelect.value === "custom") {
		return parseFloat(customDpi.value) || 0;
	}
	return parseFloat(dpiSelect.value);
}

DPI（dots per inch）は解像度の単位です。ユーザーが「カスタムDPI」を選んだときは入力欄の値を、そうでなければセレクトボックスからDPIを取得します。

if (mode === "mm-to-px") {
	const px = value * (dpi / 25.4);
	output.value = `${px.toFixed(2)} px`;
} else {
	const mm = value * (25.4 / dpi);
	output.value = `${mm.toFixed(2)} mm`;
}

1インチ = 25.4mm というルールに基づいて、DPIを使った変換を行っています。mm-to-pxなら mm × (DPI ÷ 25.4)、px-to-mmなら px × (25.4 ÷ DPI) です。

セレクトボックスとラジオボタンの連動処理

dpiSelect.addEventListener('change', () => {
	customDpiWrapper.style.display = dpiSelect.value === "custom" ? "flex" : "none"; convert();
});

「DPIの選択肢」で「カスタム」を選んだときだけ、入力欄が表示されるようにしています。選択変更のたびに再計算するのもポイントです。

モード変更時にラベル変更＋再計算

r.addEventListener('change', () => {
	inputLabel.textContent = r.value === "mm-to-px" ? "mm" : "px"; convert();
});

変換方向を変えると、ラベル表示（単位）も切り替わるようにしています。これにより、ユーザーが現在どちらの変換をしているのか分かりやすくなります。

ページ読み込み時にも変換処理

window.addEventListener('DOMContentLoaded', convert);

ページが読み込まれた直後にも自動で変換が実行されるようにしています。初期表示のタイミングで結果が空白にならないようにするためです。