<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数字変換ツール</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
input, button {
font-size: 16px;
margin: 10px 0;
}
.output {
font-size: 20px;
font-weight: bold;
color: blue;
}
</style>
</head>
<body>
<h1>半角数字を全角数字に変換</h1>
<label for="input-number">半角数字を入力してください:</label>
<input type="text" id="input-number">
<button onclick="convertToFullWidth()">変換</button>
<p>変換後の数字: <span class="output" id="output-number"></span></p>
<script>
function toFullWidthNumber(numStr) {
const offset = '0'.charCodeAt(0) - '0'.charCodeAt(0);
return numStr.replace(/[0-9]/g, function(ch) {
return String.fromCharCode(ch.charCodeAt(0) + offset);
});
}
function convertToFullWidth() {
const inputNumber = document.getElementById('input-number').value;
const outputNumber = toFullWidthNumber(inputNumber);
document.getElementById('output-number').textContent = outputNumber;
}
</script>
</body>
</html>