ひらがな・カタカナを自動変換するテキストエリアを作る方法
ひらがな・カタカナを自動変換するテキストエリアを作る方法を紹介します。このサンプルでは、入力したカタカナをひらがなへ変換するテキストエリアと、ひらがなをカタカナへ変換するテキストエリアを作成します。文字を入力または貼り付けるたびにJavaScriptで変換されるため、変換ボタンを押さなくても表記をリアルタイムで揃えられます。
お問い合わせ画面で氏名のフリガナ表記を整えたい場合、会員サイトのプロフィール入力、ECサイトの商品名や検索キーワードの登録、管理画面で読み仮名を入力する場合などに利用できます。複数行入力できるため、単語だけでなく文章や一覧形式の内容もまとめて変換できます。ひらがなとカタカナの入力間違いを減らし、登録する文字の形式を統一しやすくなる点がメリットです。
HTMLではタイトル、説明文、ラベル、プレースホルダー、補足文を変更できます。CSSではフォームの横幅、余白、背景色、枠線、角丸、テキストエリアの高さなどを調整できます。JavaScriptでは、対象となるひらがな・カタカナの文字コードを変換しています。レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用できる入力フォームとして活用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
入力した文字をリアルタイムでひらがなまたはカタカナへ自動変換します。
上のテキストエリアではカタカナがひらがなへ、下のテキストエリアではひらがながカタカナへリアルタイムで自動変換されます。
コードをコピーして使おう！
<!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-textarea_wrap">
<!-- タイトル -->
<div class="hiragana-katakana-textarea_title">
ひらがな・カタカナを自動変換
</div>
<!-- 説明文 -->
<p class="hiragana-katakana-textarea_text">
入力した文字をリアルタイムでひらがなまたはカタカナへ自動変換します。
</p>
<!-- ひらがな変換 -->
<div class="hiragana-katakana-textarea_group">
<label
class="hiragana-katakana-textarea_label"
for="hiragana">
ひらがなへ自動変換
</label>
<textarea
id="hiragana"
class="hiragana-katakana-textarea_input"
placeholder="例：オトイアワセナイヨウ"></textarea>
<span class="hiragana-katakana-textarea_note">
カタカナで入力した文字がひらがなへ変換されます。
</span>
</div>
<!-- カタカナ変換 -->
<div class="hiragana-katakana-textarea_group">
<label
class="hiragana-katakana-textarea_label"
for="katakana">
カタカナへ自動変換
</label>
<textarea
id="katakana"
class="hiragana-katakana-textarea_input"
placeholder="例：おといあわせないよう"></textarea>
<span class="hiragana-katakana-textarea_note">
ひらがなで入力した文字がカタカナへ変換されます。
</span>
</div>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは2つのテキストエリアを配置し、CSSではフォーム全体のレイアウトやデザインを設定します。JavaScriptでは入力された文字を判定し、ひらがなとカタカナをリアルタイムで相互変換します。複数行の文章にも対応しているため、そのまま実際の入力フォームへ導入できます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはフォーム全体を構成するファイルです。タイトル、説明文、ラベル、プレースホルダー、補足文などの表示内容を変更できます。
style.cssはフォーム全体のデザインを設定するファイルです。横幅、余白、背景色、枠線、角丸、文字サイズ、テキストエリアの高さ、フォーカス時の見た目などを変更できます。
script.jsは入力された文字をひらがな・カタカナへ自動変換するファイルです。入力するたびにリアルタイムで変換されるため、文字種を統一した状態で入力できます。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。上側のテキストエリアではカタカナがひらがなへ、下側のテキストエリアではひらがながカタカナへ自動変換されます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ラベル、プレースホルダー、補足文を自由に変更できます。用途に合わせてフリガナ入力欄や読み仮名入力欄などへ変更できます。
style.cssではフォーム全体の横幅、余白、背景色、文字色、枠線、角丸、テキストエリアの高さ、文字サイズ、行間、フォーカス時のデザインなどを変更できます。
script.jsでは変換対象となるテキストエリアを変更したり、片方だけ自動変換するよう調整したりできます。
数値調整
style.css
max-width:700px;
フォーム全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
フォーム全体の上下余白です。値を大きくすると上下の間隔が広がります。
padding:32px;
フォーム全体の内側余白です。値を大きくすると入力欄との間隔が広がります。
border-radius:18px;
フォーム全体の角丸です。値を大きくすると丸みが強くなります。
font-size:22px;
タイトルの文字サイズです。値を変更するとタイトルの大きさが変わります。
margin-bottom:20px;
入力欄同士の間隔です。値を大きくすると上下の余白が広がります。
min-height:140px;
テキストエリアの初期高さです。値を大きくすると最初から高く表示されます。
padding:14px 16px;
テキストエリアの内側余白です。値を大きくすると文字と枠線の間隔が広がります。
border-radius:10px;
テキストエリアの角丸です。値を変更すると入力欄の丸みが変わります。
line-height:1.7;
入力文字の行間です。値を大きくすると行間が広がります。
transition:0.3s;
フォーカス時の枠線と影が切り替わる時間です。値を大きくするとゆっくり変化し、小さくすると速くなります。
box-shadow:0 0 0 4px ...
フォーカス時の強調範囲です。4pxを変更すると影の広がりが変わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより画面幅に合わせてフォーム全体が縮小されます。また、640px以下では余白とテキストエリアの高さを調整しているため、スマートフォン・タブレット・PCのいずれでも利用できます。
コメント