水曜日, 8月 23, 2023

HTMLのコーディングは一気に設計すると奈落に落ちます(03)

入力部分のサイズを常識的なサイズとし、全てセンター合わせに変更。また以下により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">&#009;mm &emsp;
<!-- &#009;はTab、&emsp;は全角スペース
   inputサイズを5に変更。無指定は20と同等
   大凡全角文字数ですが、ブラウザにより変化がある -->
<input type="text" id="ppiInput"
size="5" style="text-align:right">&#009;ppi &emsp;
<button onclick="convertMMtoPixel()">変換計算</button> &emsp;
<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文字の[変換計算]に変更。