<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>適当な漢字を戻す</title>
<style>
body {
background: lemonchiffon;
color: Black;
}
input[type="text"] {
width: 20%; /* 親要素の幅20%に広げる */
padding: 15px; /* 上下左右に余白を設けて大きくする */
font-size: 16px; /* 文字サイズも大きくするとさらに見やすい */
box-sizing: border-box; /* paddingを含めたサイズ計算にする */
}
</style>
</head>
<body>
<center>
<input type="text" id="input" placeholder="適当な漢字を入力">
<br><br>
<button onclick="convert()">かな文字に戻す</button>
<p id="result"></p>
<script>
const map = {
"亜":"あ","伊":"い","宇":"う","江":"え","於":"お",
"加":"か","起":"き","区":"く","計":"け","己":"こ",
"画":"が","偽":"ぎ","具":"ぐ","夏":"げ","後":"ご",
"鎖":"さ","紙":"し","須":"す","世":"せ","曽":"そ",
"差":"ざ","市":"じ","素":"ず","背":"ぜ","祖":"ぞ",
"多":"た","知":"ち","津":"つ","天":"て","斗":"と",
"駄":"だ","時":"ぢ","頭":"づ","弟":"で","度":"ど",
"那":"な","仁":"に","奴":"ぬ","祢":"ね","乃":"の",
"波":"は","飛":"ひ","富":"ふ","辺":"へ","保":"ほ",
"場":"ば","微":"び","部":"ぶ","部":"べ","母":"ぼ",
"羽":"ぱ","非":"ぴ","婦":"ぷ","経":"ぺ","歩":"ぽ",
"麻":"ま","美":"み","夢":"む","芽":"め","毛":"も",
"也":"や","由":"ゆ","与":"よ","棒":"ー","点":"・",
"良":"ら","利":"り","流":"る","礼":"れ","呂":"ろ",
"和":"わ","遠":"を","無":"ん","読":"、","句":"。",
"吾":"ぁ","居":"ぃ","卯":"ぅ","恵":"ぇ","緒":"ぉ",
"屋":"ゃ","柚":"ゅ","余":"ょ","都":"っ",
};
function convert() {
const text = document.getElementById("input").value;
const result = [...text].map(c => map[c] || c).join("");
document.getElementById("result").textContent = result;
}
</script>
</center>
</body>
</html>
