ひらがなをカタカナへ自動変換するテキストエリアを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

入力タイプ・ラベル・プレースホルダー・サイズ・色・余白・枠線などを設定して、HTML・CSSを自動生成できます。

ひらがなをカタカナへ自動変換するテキストエリアを作る方法

ひらがなで入力した文字を、カタカナへ自動変換するテキストエリアを作る方法を紹介します。このサンプルでは、テキストエリアへひらがなを入力すると、入力した文字がリアルタイムでカタカナへ変換されます。利用者が自分でカタカナへ変換する操作を行わなくても、入力内容をカタカナにそろえられるテキストエリアを作成できます。

自動変換にはJavaScriptを使用し、テキストエリアの入力内容からひらがなの文字を判定して、対応するカタカナへ置き換えます。たとえば「おといあわせ」と入力すると「オトイアワセ」のように変換されます。ひらがな以外の文字はそのまま残るため、入力された文字列の中に数字や記号などが含まれていても、ひらがなの部分だけをカタカナへ変換できます。

カタカナでの入力を求めるお問い合わせフォームや会員登録画面、氏名・商品名などのフリガナ入力欄といった場面に活用できます。HTMLではテキストエリアのラベルや案内文、プレースホルダーを変更でき、CSSでは入力欄のサイズや余白、枠線、背景色などを調整できます。JavaScriptの処理を組み合わせることで、入力する人が毎回カタカナ変換を行う手間を減らせます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

ひらがな → カタカナ自動変換

入力したひらがなをリアルタイムでカタカナへ自動変換します。

カタカナへ自動変換入力したひらがながカタカナへリアルタイムで変換されます。

テキストエリアへひらがなを入力すると、入力した文字がリアルタイムでカタカナへ自動変換されます。

コードをコピーして使おう！

<!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-to-katakana-textarea_wrap">

    <!-- 見出し -->
    <div class="hiragana-to-katakana-textarea_title">
      ひらがな → カタカナ自動変換
    </div>

    <!-- 説明文 -->
    <p class="hiragana-to-katakana-textarea_text">
      入力したひらがなをリアルタイムでカタカナへ自動変換します。
    </p>

    <!-- テキストエリアのラベル -->
    <label class="hiragana-to-katakana-textarea_label" for="hiragana-to-katakana-textarea-input">
      カタカナへ自動変換
    </label>

    <!-- ひらがなを入力するテキストエリア -->
    <textarea id="hiragana-to-katakana-textarea-input" class="hiragana-to-katakana-textarea_input" placeholder="ひらがなを入力してください　例：おといあわせないよう"></textarea>

    <!-- 入力方法の案内 -->
    <span class="hiragana-to-katakana-textarea_note">
      入力したひらがながカタカナへリアルタイムで変換されます。
    </span>

  </div>

  <!-- JavaScriptファイル -->
  <script src="script.js"></script>

</body>

</html>

/* ページ全体 */
body{
  margin:0; /* ページ外側の余白 */
  background:#ffffff; /* ページの背景色 */
  font-family:sans-serif;
}

/* すべての要素で幅の計算方法を統一 */
*{
  box-sizing:border-box;
}

/* 自動変換テキストエリア全体 */
.hiragana-to-katakana-textarea_wrap{
  width:100%; /* 利用できる横幅いっぱいに表示 */
  max-width:700px; /* 最大横幅。値を大きくすると表示エリアが広くなる */
  margin:40px auto; /* 上下の余白。左右は中央配置 */
  padding:32px; /* 内側の余白。値を大きくすると内容周辺の余白が広くなる */
  border:1px solid #dbe4f0; /* 外枠の太さ・種類・色 */
  border-radius:18px; /* 角丸。値を大きくすると丸みが強くなる */
  background:#f8fbff; /* 全体の背景色 */
}

/* 見出し */
.hiragana-to-katakana-textarea_title{
  margin:0 0 12px; /* 見出し下の余白 */
  color:#111827; /* 見出しの文字色 */
  font-size:22px; /* 見出しの文字サイズ */
  font-weight:700;
  line-height:1.5; /* 見出しの行間 */
  text-align:center;
}

/* 説明文 */
.hiragana-to-katakana-textarea_text{
  margin:0 0 24px; /* 説明文下の余白 */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ */
  line-height:1.8; /* 説明文の行間 */
  text-align:center;
}

/* テキストエリアのラベル */
.hiragana-to-katakana-textarea_label{
  display:block;
  margin-bottom:8px; /* ラベルと入力欄の間隔 */
  color:#111827; /* ラベルの文字色 */
  font-size:16px; /* ラベルの文字サイズ */
  font-weight:700;
  line-height:1.5; /* ラベルの行間 */
}

/* テキストエリア */
.hiragana-to-katakana-textarea_input{
  display:block;
  width:100%; /* 入力欄の横幅 */
  min-height:140px; /* 入力欄の最小高さ。値を大きくすると縦に広くなる */
  padding:14px 16px; /* 入力欄内側の上下・左右の余白 */
  border:2px solid #cbd5e1; /* 入力欄の枠線 */
  border-radius:10px; /* 入力欄の角丸 */
  background:#ffffff; /* 入力欄の背景色 */
  color:#111827; /* 入力文字の色 */
  font-family:inherit;
  font-size:16px; /* 入力文字のサイズ */
  line-height:1.7; /* 入力文字の行間 */
  resize:vertical;
  outline:none;
  transition:
    border-color .3s ease, /* 枠線の変化時間 */
    box-shadow .3s ease; /* 影の変化時間 */
}

/* プレースホルダー */
.hiragana-to-katakana-textarea_input::placeholder{
  color:#9ca3af; /* プレースホルダーの文字色 */
  opacity:1;
}

/* フォーカス時 */
.hiragana-to-katakana-textarea_input:focus{
  border-color:#2563eb; /* フォーカス時の枠線色 */
  box-shadow:0 0 0 4px rgba(37,99,235,.12); /* フォーカス時の外側の影 */
}

/* 入力欄下の案内文 */
.hiragana-to-katakana-textarea_note{
  display:block;
  margin-top:8px; /* 入力欄との間隔 */
  color:#64748b; /* 案内文の文字色 */
  font-size:14px; /* 案内文の文字サイズ */
  line-height:1.6; /* 案内文の行間 */
}

/* 画面幅640px以下 */
@media screen and (max-width:640px){

  /* スマートフォン向けの全体調整 */
  .hiragana-to-katakana-textarea_wrap{
    margin:24px auto; /* スマートフォンでの上下余白 */
    padding:24px 18px; /* スマートフォンでの内側余白 */
  }

  /* スマートフォン向けの入力欄調整 */
  .hiragana-to-katakana-textarea_input{
    min-height:130px; /* スマートフォンでの入力欄の最小高さ */
    padding:13px 14px; /* スマートフォンでの入力欄内側の余白 */
  }

}

/* 自動変換するテキストエリアを取得 */
const hiraganaToKatakanaTextarea=
  document.getElementById(
    "hiragana-to-katakana-textarea-input"
  );

/* テキストエリアへ文字が入力されたときに実行 */
hiraganaToKatakanaTextarea.addEventListener(
  "input",
  function(){

    /*
      入力内容に含まれるひらがなを検索し、
      対応するカタカナへ置き換える
    */
    hiraganaToKatakanaTextarea.value=
      hiraganaToKatakanaTextarea.value.replace(
        /[\u3041-\u3096]/g,
        function(character){

          /*
            ひらがなとカタカナの文字コード差である
            0x60を加えてカタカナへ変換
          */
          return String.fromCharCode(
            character.charCodeAt(0)+0x60
          );

        }
      );

  }
);

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML、CSS、JavaScriptの3ファイルで構成されています。HTMLでは「ひらがな → カタカナ自動変換」の見出しや説明文、ラベル、テキストエリアを配置し、CSSでフォーム全体と入力欄のデザインを整えます。JavaScriptではテキストエリアへの入力を検知し、入力内容に含まれるひらがなをカタカナへリアルタイムで変換します。外部サービスや外部ライブラリは使用しません。

sample/
├── index.html
├── style.css
└── script.js

各ファイルの役割
index.htmlは、自動変換テキストエリアの表示内容を構成するファイルです。「ひらがな → カタカナ自動変換」の見出し、説明文、「カタカナへ自動変換」のラベル、テキストエリア、入力欄下の案内文を配置しています。プレースホルダーには、入力方法が分かるように「ひらがなを入力してください」と入力例を表示しています。

style.cssは、フォーム全体とテキストエリアのデザインを設定するファイルです。全体の横幅や余白、背景色、枠線、角丸のほか、テキストエリアの高さ、文字サイズ、行間、フォーカス時の枠線や影などを設定しています。画面幅640px以下で余白やテキストエリアの高さを調整するレスポンシブ設定も含まれています。

script.jsは、テキストエリアへ入力されたひらがなをカタカナへ変換するファイルです。入力内容が変化するたびに処理を実行し、ひらがなの文字コードへ0x60を加えることで対応するカタカナへ置き換えます。ひらがな以外の文字は、この変換処理の対象になりません。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、3つのファイルを同じ階層へ保存します。index.htmlからstyle.cssとscript.jsを読み込む構成になっているため、ファイル名を変更せずにsample/index.htmlをブラウザで開けば動作を確認できます。

表示されたテキストエリアへ、ひらがなで文字を入力してください。たとえば「おといあわせ」と入力すると、入力されたひらがなが「オトイアワセ」のようにリアルタイムでカタカナへ変換されます。APIキーや外部サービスの設定などは必要ありません。

カスタマイズできる内容
index.htmlでは、「ひらがな → カタカナ自動変換」の見出し、説明文、「カタカナへ自動変換」のラベル、プレースホルダー、入力欄下の案内文を変更できます。フリガナ入力や商品名の読みなど、使用するフォームに合わせた文章へ変更できます。

style.cssでは、フォーム全体の最大横幅、余白、背景色、枠線、角丸、見出しや説明文の文字サイズ・文字色、テキストエリアの高さ、内側余白、枠線、背景色、文字色、フォーカス時の枠線色や影などを変更できます。

数値調整
style.css
max-width:700px;
フォーム全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

margin:40px auto;
フォーム全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。

padding:32px;
フォーム全体の内側余白です。値を大きくすると内容と外枠の間隔が広がり、小さくすると狭くなります。

border:1px solid #dbe4f0;
フォーム全体の枠線です。1pxを大きくすると枠線が太くなり、小さくすると細くなります。

border-radius:18px;
フォーム全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

font-size:22px;
見出しの文字サイズです。値を大きくすると見出しが大きくなり、小さくすると控えめになります。

margin:0 0 24px;
説明文の下側余白です。24pxを大きくするとラベルとの間隔が広がり、小さくすると狭くなります。

margin-bottom:8px;
ラベルとテキストエリアの間隔です。値を大きくすると間隔が広がり、小さくすると近くなります。

min-height:140px;
テキストエリアの最小高さです。値を大きくすると入力欄が高くなり、小さくすると低くなります。

padding:14px 16px;
テキストエリアの内側余白です。14pxが上下、16pxが左右の余白を表し、それぞれの値を大きくすると文字と枠線の間隔が広がります。

border:2px solid #cbd5e1;
テキストエリアの枠線です。2pxを大きくすると枠線が太くなり、小さくすると細くなります。

border-radius:10px;
テキストエリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

font-size:16px;
テキストエリアへ入力する文字のサイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。

line-height:1.7;
テキストエリア内の文字の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。

transition:0.3s;
フォーカス時に枠線と影が切り替わる時間です。0.3秒で変化し、値を大きくするとゆっくり、小さくすると速く切り替わります。

box-shadow:0 0 0 4px ...
テキストエリアへフォーカスしたときに表示する外側の強調範囲です。4pxを大きくすると影の範囲が広がり、小さくすると控えめになります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、フォーム全体が利用できる画面幅に合わせて縮小されます。また、画面幅640px以下ではフォーム全体をmargin:24px auto;、padding:24px 18px;へ変更し、テキストエリアをmin-height:130px;、padding:13px 14px;へ調整しています。スマートフォン・タブレット・PCで画面幅に合わせて表示できます。