過去にVisual Studio Basicで作成していますが、Windows環境オンリーなのでHTML版を模索してみました。
Visual Studio Basic_25 pixel, mm, dpiの関係計算機 2022/08/27
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>mm, pixel, ppi 計算ツール</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
text-align: center;
}
.input_box {
margin: 0px auto;
width: 350px;
height: 150px;
background-color: #e5e4e6;
}
input {
width: 150px;
padding: 5px;
margin: 10px 0px;
}
button {
padding: 3px 12px;
font-size: 16px;
margin: 20px 5px;
cursor: pointer;
}
.result {
margin-top: 20px;
font-size: 1.2em;
color: #333333;
}
</style>
</head>
<body bgcolor="#d3d3d3">
<h2>mm, pixel, ppi Calculation Tools</h2>
<div class="input_box">
<div>
<!-- ミリメートルを入力 -->
<label for="mmInput">millimetre (mm):</label>
<input type="number" id="mmInput" placeholder="例: 25.4">
</div>
<div>
<!-- ピクセルを入力 -->
<label for="pxInput">pixel (px):</label>
<input type="number" id="pxInput" placeholder="例: 1000">
</div>
<div>
<!-- pixels per inch を入力 -->
<label for="ppiInput">pixels per inch (ppi):</label>
<input type="number" id="ppiInput" placeholder="例: 150">
</div>
</div>
<div>
<button onclick="calculatePixels()">pixel を計算</button>
<button onclick="calculateMM()">mm を計算</button>
<button onclick="calculatePPI()">ppi を計算</button>
</div>
<div class="result" id="result"></div>
<p><br>
pixel = mm * ppi / 25.4
mm = pixel * 25.4 / ppi
ppi = pixel * 25.4 / mm
</p>
<script>
function calculatePixels() {
const mm =
parseFloat(document.getElementById('mmInput').value);
const ppi =
parseFloat(document.getElementById('ppiInput').value);
if (isNaN(mm) || isNaN(ppi) || ppi <= 0) {
document.getElementById('result').textContent =
"正しい数値を入力してください";
return;
}
const inches = mm / 25.4; // 1インチ = 25.4mm
const pixels = inches * ppi;
document.getElementById('result').textContent =
`結果: ${pixels.toFixed(2)} pixel (px)`;
}
function calculateMM() {
const px =
parseFloat(document.getElementById('pxInput').value);
const ppi =
parseFloat(document.getElementById('ppiInput').value);
if (isNaN(px) || isNaN(ppi) || ppi <= 0) {
document.getElementById('result').textContent =
"正しい数値を入力してください";
return;
}
const inches = px / ppi;
const mm = inches * 25.4; // 1インチ = 25.4mm
document.getElementById('result').textContent =
`結果: ${mm.toFixed(2)} millimetre (mm)`;
}
function calculatePPI() {
const px =
parseFloat(document.getElementById('pxInput').value);
const mm =
parseFloat(document.getElementById('mmInput').value);
if (isNaN(px) || isNaN(mm) || mm <= 0) {
document.getElementById('result').textContent =
"正しい数値を入力してください";
return;
}
const inches = mm / 25.4; // 1インチ = 25.4mm
const ppi = px / inches;
document.getElementById('result').textContent =
`結果: ${ppi.toFixed(2)} pixels per inch (ppi)`;
}
</script>
</body>
</html>
表示直後の状態。
mmとpixcelを入力して［ppiを計算］をクリックした結果。
pixelとをppi入力して［mmを計算］をクリックした結果。
mmとをppi入力して［pxを計算］をクリックした結果。
