最後にカラー設計でひとまず完了です。
は前回からの変更箇所。
前回のソースから削除されている部分もあります。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>mm to pixel Conversion</title>
<style type="text/css">
/* CSSによるmain_box設定 */
div#main_box {
height: 150px;
width: 500px;
background: #add8e6; /* lightblue */
margin: 50px auto;
}
</style>
</head>
<body bgcolor="#696969">
<!--#696969はdimgray -->
<center>
<div id="main_box">
<br>
<font size="4">mmとppi指定でpixel値を計算</font>
<p>
<input type="text" id="mmInput"
size="5" style="text-align:right">	mm  
<input type="text" id="ppiInput"
size="5" style="text-align:right">	ppi  
<button onclick="convertMMtoPixel()"
style="background-color: #ffd700">変換計算</button>  
<!-- #ffd700はgold -->
<button onclick="window.location.reload();"
style="background-color: #40e0d0">リセット</button>
<!--#40e0d0はturquoise -->
</p>
<p id="result"></p>
</div>
</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);
document.getElementById("result").textContent =
ppi + "ppiの " + mmValue +
"mmは\u3000凡そ "+ formattedPixelValue + " pixels";
} else {
document.getElementById("result").textContent =
"無効な入力です。mmとppiに有効な数値を入力してください。";
}
}
</script>
</body>
</html>
<!-- index.html -->
<style>〜 </style>がHTML内のCSS
