ひらがな・カタカナを自動変換するテキストボックスを作る方法
ひらがな・カタカナを自動変換するテキストボックスを作る方法を紹介します。このサンプルでは、入力した文字をリアルタイムでひらがなまたはカタカナへ自動変換できます。HTML・CSS・JavaScriptだけで動作するため、ライブラリを追加することなく手軽に導入できるサンプルです。
デモでは「ひらがなへ自動変換」と「カタカナへ自動変換」の2種類を用意しています。お問い合わせ画面や会員サイトでは入力形式を統一したい場合があり、ふりがな欄ではひらがな、フリガナ欄ではカタカナに統一したいケースで活用できます。入力と同時に自動変換されるため、利用者が変換方法を意識する必要がなく、入力ミスや表記ゆれを減らせます。
会員登録フォーム、予約フォーム、ECサイト、管理画面など、読み仮名を入力するさまざまな場面で利用できます。文字色や枠線、余白などのデザインはCSSで自由に変更できるため、既存サイトにも合わせやすく、初心者でもカスタマイズしながら導入しやすいサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
入力した文字がリアルタイムで変換されます。
上側はカタカナからひらがなへ、下側はひらがなからカタカナへリアルタイムで自動変換されます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン表示対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>ひらがな・カタカナを自動変換するテキストボックス</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ひらがな・カタカナ自動変換フォーム全体 -->
<div class="hiragana-katakana-convert-textbox_wrap">
<!-- タイトル -->
<div class="hiragana-katakana-convert-textbox_title">
ひらがな・カタカナを自動変換
</div>
<!-- 説明文 -->
<p class="hiragana-katakana-convert-textbox_text">
入力した文字が、ひらがなまたはカタカナへリアルタイムで変換されます。
</p>
<!-- ひらがなへの変換エリア -->
<div class="hiragana-katakana-convert-textbox_group">
<!-- ひらがな変換のラベル -->
<label
class="hiragana-katakana-convert-textbox_label"
for="hiragana-input">
ひらがなへ自動変換
</label>
<!-- カタカナをひらがなへ変換するテキストボックス -->
<input
class="hiragana-katakana-convert-textbox_input"
id="hiragana-input"
name="hiragana-input"
type="text"
placeholder="例：カタカナ">
<!-- ひらがな変換の説明 -->
<span class="hiragana-katakana-convert-textbox_note">
カタカナで入力するとひらがなへ変換されます。
</span>
</div>
<!-- カタカナへの変換エリア -->
<div class="hiragana-katakana-convert-textbox_group">
<!-- カタカナ変換のラベル -->
<label
class="hiragana-katakana-convert-textbox_label"
for="katakana-input">
カタカナへ自動変換
</label>
<!-- ひらがなをカタカナへ変換するテキストボックス -->
<input
class="hiragana-katakana-convert-textbox_input"
id="katakana-input"
name="katakana-input"
type="text"
placeholder="例：ひらがな">
<!-- カタカナ変換の説明 -->
<span class="hiragana-katakana-convert-textbox_note">
ひらがなで入力するとカタカナへ変換されます。
</span>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでひらがな・カタカナへ変換するテキストボックスを配置し、CSSで見た目を整え、JavaScriptで入力された文字をリアルタイムにひらがなまたはカタカナへ自動変換します。ライブラリを使用せずに動作するため、そのままコピーして導入しやすく、初心者でも仕組みを理解しながら利用できます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlでは、ひらがな変換用とカタカナ変換用のテキストボックスを配置しています。タイトルや説明文、ラベル、プレースホルダーを変更すると表示内容を自由に編集できます。
style.cssでは、フォーム全体のレイアウトや背景色、文字色、枠線、角丸、余白などのデザインを設定しています。フォーカス時の枠線色やレスポンシブ表示もこのファイルで管理しています。
script.jsでは、入力イベントを利用してカタカナをひらがなへ、ひらがなをカタカナへリアルタイムで変換しています。変換処理を変更したい場合は、このファイルを編集します。
設置方法・使い方
sampleフォルダ内の3ファイルを同じ階層へ配置してください。配置後はsample/index.htmlをブラウザで開くだけで利用できます。上側のテキストボックスではカタカナがひらがなへ、下側のテキストボックスではひらがながカタカナへリアルタイムで変換されます。
カスタマイズできる内容
index.htmlではタイトルや説明文、ラベル、プレースホルダーを変更できます。style.cssでは背景色、文字色、枠線、角丸、余白、文字サイズなどを自由に変更できます。script.jsでは変換対象のテキストボックスを追加したり、別の入力欄へ変換処理を適用したりできます。
数値調整
style.cssのmax-width:700px;を変更するとフォーム全体の横幅を調整できます。padding:32px;を変更すると内側余白が変わります。border-radius:18px;を変更すると角丸の大きさを調整できます。transition:border-color 0.3s ease;の0.3秒は枠線色が切り替わる時間を表し、値を大きくするとゆっくり、小さくすると速く切り替わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssではwidth:100%とmax-widthを利用して画面幅に応じてフォームサイズを自動調整しています。また、640px以下ではメディアクエリで余白を調整しているため、スマートフォン・タブレット・PCでも見やすく快適に利用できます。
コメント