指定したmmとppi時のpixel(px)を計算します。
IllustratorやInDesignのレイアウトサイズを指定解像度で利用した時のサイズpixel(px)を計算します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>mm → pixel(px)計算</title>
<style>
body {
background: black;
color: white;
}
input {
width: 80px;
margin: 5px;
}
</style>
</head>
<body>
<center>
<h3>mm → pixel(px)変換</h3>
<label>
幅／width (mm):
<input id="widthMm" type="number" value="154">
</label>
<br>
<label>
高さ／height (mm):
<input id="heightMm" type="number" value="106">
</label>
<br>
<label>
解像度／resolution (ppi):
<input id="dpi" type="number" value="350">
</label>
<br><br>
<button onclick="calc()">計算</button>
<div id="result"></div>
<script>
function calc() {
const widthMm =
Number(document.getElementById("widthMm").value);
const heightMm =
Number(document.getElementById("heightMm").value);
const dpi =
Number(document.getElementById("dpi").value);
if (dpi <= 0) {
document.getElementById("result").textContent =
"DPIは1以上を入力してください";
return;
}
const widthPx = (widthMm / 25.4) * dpi;
const heightPx = (heightMm / 25.4) * dpi;
document.getElementById("result").innerHTML = `
<p>幅／width: ${Math.round(widthPx)} pixel(px)<br>
高さ／height: ${Math.round(heightPx)} pixel(px)</p>
`;
}
</script>
</center>
</body>
</html>
実行直後の状態。必要事項を入力して［計算］をクリックするだけで・・・
結果が表示されます。
