🔤 英字の半角→全角変換ツール
入力した半角英字をすべて全角英字に変換します。
✅ 変換結果
📋 コピペ用コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>半角英字を全角に変換</title>
<style>
body {
font-family: sans-serif;
padding: 2em;
}
textarea {
width: 100%;
height: 100px;
margin-bottom: 1em;
}
button {
padding: 0.5em 1em;
}
.copied-message {
color: green;
display: none;
margin-top: 0.5em;
}
</style>
</head>
<body>
<h2>半角英字 → 全角英字変換ツール</h2>
<label for="input">半角英字を入力：</label><br>
<textarea id="input" placeholder="例: Hello, world!"></textarea><br>
<button onclick="convertToFullWidth()">全角に変換</button><br><br>
<label for="output">結果（全角）：</label><br>
<textarea id="output" readonly></textarea><br>
<button onclick="copyOutput()">📋 結果をコピー</button>
<div class="copied-message" id="copied-msg">✅ コピーしました！</div>
<script>
function convertToFullWidth() {
const input = document.getElementById("input").value;
let result = "";
for (let i = 0; i < input.length; i++) {
const charCode = input.charCodeAt(i);
if ((charCode >= 0x41 && charCode <= 0x5A) || (charCode >= 0x61 && charCode <= 0x7A)) {
result += String.fromCharCode(charCode + 0xFEE0);
} else {
result += input[i];
}
}
document.getElementById("output").value = result;
}
function copyOutput() {
const text = document.getElementById("output").value;
navigator.clipboard.writeText(text).then(() => {
const msg = document.getElementById("copied-msg");
msg.style.display = "inline";
setTimeout(() => msg.style.display = "none", 1500);
});
}
</script>
</body>
</html>🧩 全角英字変換の活用と注意点
全角英字は、主に日本国内の一部システムや郵便入力フォームで使用される形式で、見た目が揃いやすい特徴があります。たとえば、ＡＢＣのように1文字の幅が一定になるため、デザイン上の整列やレイアウトにおいて有利になるケースがあります。
ただし、すべてのサービスが全角入力を許容しているわけではなく、一部の海外サービスやプログラム処理ではＡとAが区別されるため、意図しない不具合につながることもあります。使用する場面には注意が必要です。
🔧 JavaScriptでの変換処理について
このツールでは、charCodeAt()で文字コードを取得し、英字であれば+ 0xFEE0の処理を加えることで全角に変換しています。たとえば、A（U+0041）は、Ａ（U+FF21）に変換されます。
この変換方法は、英字だけに特化しているため、数字や記号などを除外しつつ、純粋なアルファベットのみを全角化したい場面に適しています。
ユーザーが誤って半角で入力した場合に自動で補正する仕組みとしても活用でき、フォームの入力精度を向上させる手段として便利です。