入力部分のサイズを常識的なサイズとし、全てセンター合わせに変更。また以下によりdpiをppiに変更。
は前回からの変更箇所。
前回のソースから削除されている部分もあります。
dpi(dots per inch)とは
1インチあたりのドット数で、
入出力機器(プリンター、デジタルカメラ等)の解像度
ppi(pixels per inch)とは
1インチあたりのピクセル数で、
画像データを印刷する際の画像解像度
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>mm to pixel Conversion</title>
</head>
<body bgcolor="#f5f5f5">
<center>
<font size="4">mmとppi指定でpixel値を計算</font>
<p>
<input type="text" id="mmInput"
size="5" style="text-align:right">	mm  
<!-- 	はTab、 は全角スペース
inputサイズを5に変更。無指定は20と同等
大凡全角文字数ですが、ブラウザにより変化がある -->
<input type="text" id="ppiInput"
size="5" style="text-align:right">	ppi  
<button onclick="convertMMtoPixel()">変換計算</button>  
<button onclick="window.location.reload();">リセット</button>
</p>
<p id="result"></p>
</center>
<script>
function convertMMtoPixel() {
var mmValue =
parseFloat(document.getElementById("mmInput").value);
var ppi =
parseFloat(document.getElementById("ppiInput").value);
if (!isNaN(mmValue) && !isNaN(ppi)) {
var pixelValue = (mmValue * ppi) / 25.4;
var formattedPixelValue = pixelValue.toFixed(2);
/* 小数第2桁まで表示 */
document.getElementById("result").textContent =
mmValue + " mmは凡そ\u3000"+ formattedPixelValue + " pixels";
} else { /* \u3000は全角スペース */
document.getElementById("result").textContent =
"無効な入力です。mmとppiに有効な数値を入力してください。";
}
}
</script>
</body>
</html>
<!-- index.html -->
計算結果を少数第2桁に変更。
細部をTabや全角スペースで調整。
[リセット]ボタンを追加。
[リセット]に合わせて[変換]を4文字の[変換計算]に変更。