半角→全角(英字・数字・記号)変換ツール
このツールでは、半角英字(a〜z、A〜Z)、半角数字(0〜9)、および主要な半角記号を全角に一括変換できます。漢字・ひらがな・カタカナなどの日本語は変換されずそのまま維持されます。
🔹 入力エリア
📄 変換結果
💻 完全動作コード(※このコピペのみでHTMLで動作するコード)
<!DOCTYPE html>
<html lang="ja">
<head>
<?php include($_SERVER['DOCUMENT_ROOT'] . "/meta.php"); ?>
<link rel="stylesheet" href="/assets/css/template-common.css?v=1">
<style>
body {
font-family: sans-serif;
padding: 2rem;
max-width: 700px;
margin: auto;
}
textarea {
width: 100%;
height: 120px;
margin-bottom: 1em;
font-size: 1rem;
}
button {
padding: 0.5em 1em;
margin-right: 1em;
}
.copied-message {
color: green;
display: none;
margin-top: 0.5em;
}
</style>
</head>
<body>
<h1>半角→全角(英字・数字・記号)変換ツール</h1>
<p>このツールでは、半角英字(a〜z、A〜Z)、半角数字(0〜9)、および主要な半角記号を全角に一括変換できます。漢字・ひらがな・カタカナなどの日本語は変換されずそのまま維持されます。</p>
<h2>🔹 入力エリア</h2>
<label for="input">半角テキストを入力:</label><br>
<textarea id="input" placeholder="例: Hello 123 - ! アイウ 漢字"></textarea><br>
<button onclick="convertToFullWidth()">全角に変換</button>
<h2>📄 変換結果</h2>
<label for="output">全角変換後:</label><br>
<textarea id="output" readonly></textarea><br>
<button onclick="copyResult()">📋 結果をコピー</button>
<div class="copied-message" id="copied-msg">✅ コピーしました!</div>
<script>
function convertToFullWidth() {
const half = document.getElementById("input").value;
let full = "";
const symbolMap = {
'-': 'ー', '!': '!', '"': '"', '#': '#', '$': '$',
'%': '%', '&': '&', "'": ''', '(': '(', ')': ')',
'*': '*', '+': '+', ',': ',', '.': '.', '/': '/',
':': ':', ';': ';', '<': '<', '=': '=', '>': '>',
'?': '?', '@': '@', '[': '[', '\\': '\', ']': ']',
'^': '^', '_': '_', '`': '`', '{': '{', '|': '|',
'}': '}', '~': '~', ' ': ' '
};
for (let i = 0; i < half.length; i++) {
const c = half[i];
const code = half.charCodeAt(i);
if (code >= 0x21 && code <= 0x7E) {
if (symbolMap[c]) {
full += symbolMap[c];
} else if (code >= 0x30 && code <= 0x39) {
full += String.fromCharCode(code + 0xFEE0);
} else if ((code >= 0x41 && code <= 0x5A) || (code >= 0x61 && code <= 0x7A)) {
full += String.fromCharCode(code + 0xFEE0);
} else {
full += c;
}
} else {
full += c;
}
}
document.getElementById("output").value = full;
}
function copyResult() {
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>
📘 解説と使い方
🧩 このページは、英数字や記号を「半角」から「全角」に変換するためのツールです。
特に日本の行政系サイトや印刷物、ECサイトの住所・名前入力フォームなどでは、「全角で入力してください」と求められるケースが多く見られます。
このツールでは、a〜z や 0〜9、- や ! などの記号を一括で全角化できるため、作業の手間を省くことができます。
⚙️ 仕組みとしては、JavaScriptで1文字ずつ文字コードを読み取り、全角に相当するコード(+65248)に変換しています。
ただし、記号に関しては Unicode の規則が統一されていないため、マップ(変換表)を用いて個別に対応しています。
こういった変換処理は、入力チェックや帳票の整形、データの正規化といった実務にも応用可能です。
🔒 日本語(漢字・ひらがな・カタカナなど)は変換対象外のため、安心して使用できます。
「変換後に文字化けしないか不安…」という場合でも、日本語はそのまま保持される仕様なので安心です。
💡 全角入力の指定が根強く残っている今、このような変換ツールを1つブックマークしておくと意外と重宝します。
一括処理・自動化の第一歩として、ぜひ活用してみてください。