大文字を小文字に・小文字を大文字にアルファベットを自動変換するテキストエリアを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

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

大文字を小文字に・小文字を大文字にアルファベットを自動変換するテキストエリアを作る方法

大文字のアルファベットを小文字に、小文字のアルファベットを大文字に自動変換するテキストエリアを作る方法を紹介します。このサンプルでは、上側のテキストエリアへ入力した大文字のアルファベットを小文字へ、下側のテキストエリアへ入力した小文字のアルファベットを大文字へリアルタイムで変換します。文字を入力するたびに自動で変換されるため、変換ボタンを押す必要はありません。

テキストエリアへの入力自体は制限せず、アルファベットだけを変換対象にします。たとえば「ABC123-商品」と入力した場合は「abc123-商品」のように大文字のアルファベットだけが小文字へ変わり、数字・日本語・記号などはそのまま残ります。商品コードや識別コードの表記をそろえたい管理画面、入力された英字を一定の形式に統一したいフォームなどで利用できます。

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="alphabet-uppercase-lowercase-textarea_wrap">

    <!-- タイトル -->
    <div class="alphabet-uppercase-lowercase-textarea_title">
      大文字・小文字を自動変換
    </div>

    <!-- 説明文 -->
    <p class="alphabet-uppercase-lowercase-textarea_text">
      上の入力欄では小文字を大文字に、下の入力欄では大文字を小文字にリアルタイムで変換します。
    </p>

    <!-- 小文字を大文字へ変換するグループ -->
    <div class="alphabet-uppercase-lowercase-textarea_group">

      <!-- 小文字から大文字への変換ラベル -->
      <label
        class="alphabet-uppercase-lowercase-textarea_label"
        for="uppercase-textarea">
        小文字 → 大文字
      </label>

      <!-- 小文字のアルファベットを大文字へ変換するテキストエリア -->
      <textarea
        class="alphabet-uppercase-lowercase-textarea_input"
        id="uppercase-textarea"
        name="uppercase-textarea"
        placeholder="小文字のアルファベットを入力してください　例：product code&#10;abcd-1234-efgh"></textarea>

      <!-- 小文字から大文字への変換についての補足文 -->
      <span class="alphabet-uppercase-lowercase-textarea_note">
        入力した小文字のアルファベットが大文字へリアルタイムで変換されます。
      </span>

    </div>

    <!-- 大文字を小文字へ変換するグループ -->
    <div class="alphabet-uppercase-lowercase-textarea_group">

      <!-- 大文字から小文字への変換ラベル -->
      <label
        class="alphabet-uppercase-lowercase-textarea_label"
        for="lowercase-textarea">
        大文字 → 小文字
      </label>

      <!-- 大文字のアルファベットを小文字へ変換するテキストエリア -->
      <textarea
        class="alphabet-uppercase-lowercase-textarea_input"
        id="lowercase-textarea"
        name="lowercase-textarea"
        placeholder="大文字のアルファベットを入力してください　例：USER@EXAMPLE.COM&#10;CONTACT MESSAGE"></textarea>

      <!-- 大文字から小文字への変換についての補足文 -->
      <span class="alphabet-uppercase-lowercase-textarea_note">
        入力した大文字のアルファベットが小文字へリアルタイムで変換されます。
      </span>

    </div>

  </div>

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

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
}

/* 入力フォーム全体 */
.alphabet-uppercase-lowercase-textarea_wrap{
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:700px; /* 最大横幅。値を大きくするとフォーム全体が横に広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 内側余白。値を大きくすると内容と枠線の間隔が広がる */
  border:1px solid #dbe4f0; /* フォーム全体を囲む枠線。1pxを大きくすると太くなる */
  border-radius:18px; /* フォーム全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fbff; /* フォーム全体の背景色 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* タイトル */
.alphabet-uppercase-lowercase-textarea_title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルの太さ。値を大きくすると文字が太くなる */
  line-height:1.5; /* タイトルの行間。値を大きくすると行間が広がる */
  text-align:center; /* タイトルを中央揃えにする */
}

/* 説明文 */
.alphabet-uppercase-lowercase-textarea_text{
  margin:0 0 24px; /* 下側24pxの余白。値を大きくすると入力項目との間隔が広がる */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ。値を大きくすると文字が大きくなる */
  line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
  text-align:center; /* 説明文を中央揃えにする */
}

/* 各入力グループ */
.alphabet-uppercase-lowercase-textarea_group{
  margin-bottom:24px; /* 下側24pxの余白。値を大きくすると2つの入力欄の間隔が広がる */
}

/* 最後の入力グループ */
.alphabet-uppercase-lowercase-textarea_group:last-child{
  margin-bottom:0; /* 最後の入力グループには下側余白を付けない */
}

/* ラベル */
.alphabet-uppercase-lowercase-textarea_label{
  display:block; /* ラベルを横幅いっぱいのブロック要素にする */
  margin-bottom:8px; /* 下側8pxの余白。値を大きくすると入力欄との間隔が広がる */
  color:#111827; /* ラベルの文字色 */
  font-size:16px; /* ラベルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* ラベルの太さ。値を大きくすると文字が太くなる */
  line-height:1.5; /* ラベルの行間。値を大きくすると行間が広がる */
}

/* テキストエリア */
.alphabet-uppercase-lowercase-textarea_input{
  display:block; /* テキストエリアをブロック要素として表示 */
  width:100%; /* 親要素の横幅いっぱいに表示 */
  min-height:150px; /* 初期の最低高さ。値を大きくすると最初から高く表示される */
  padding:14px 16px; /* 上下14px・左右16px。値を大きくすると文字と枠線の間隔が広がる */
  border:2px solid #cbd5e1; /* 通常時の枠線。2pxを大きくすると枠線が太くなる */
  border-radius:10px; /* テキストエリアの角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* テキストエリアの背景色 */
  color:#111827; /* 入力文字の色 */
  font-family:inherit; /* ページ全体と同じフォントを使用 */
  font-size:16px; /* 入力文字のサイズ。値を大きくすると文字が大きくなる */
  line-height:1.7; /* 入力文字の行間。値を大きくすると行間が広がる */
  resize:vertical; /* 上下方向のみ手動で高さを変更できる */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
  outline:none; /* ブラウザ標準の外枠を非表示 */
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
  /*
    0.3秒で枠線と影を切り替える。
    値を大きくするとゆっくり、小さくすると速く変化する。
  */
}

/* プレースホルダー */
.alphabet-uppercase-lowercase-textarea_input::placeholder{
  color:#9ca3af; /* プレースホルダーの文字色 */
  opacity:1; /* プレースホルダーを完全な不透明状態で表示 */
}

/* テキストエリアへフォーカスした状態 */
.alphabet-uppercase-lowercase-textarea_input:focus{
  border-color:#2563eb; /* フォーカス時の枠線色 */
  box-shadow:0 0 0 4px rgba(37,99,235,0.12); /* 外側の強調範囲。4pxを大きくすると影が広がる */
}

/* 補足文 */
.alphabet-uppercase-lowercase-textarea_note{
  display:block; /* 補足文をブロック要素として表示 */
  margin-top:6px; /* 上側6pxの余白。値を大きくすると入力欄との間隔が広がる */
  color:#64748b; /* 補足文の文字色 */
  font-size:14px; /* 補足文の文字サイズ。値を大きくすると文字が大きくなる */
  line-height:1.5; /* 補足文の行間。値を大きくすると行間が広がる */
}

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

  /* スマートフォン表示時のページ全体 */
  body{
    padding:24px 12px; /* 上下24px・左右12pxへ縮小 */
  }

  /* スマートフォン表示時の入力フォーム全体 */
  .alphabet-uppercase-lowercase-textarea_wrap{
    margin:24px auto; /* 上下余白を24pxへ縮小 */
    padding:24px 18px; /* 上下24px・左右18pxへ縮小 */
  }

  /* スマートフォン表示時のテキストエリア */
  .alphabet-uppercase-lowercase-textarea_input{
    min-height:130px; /* 初期の最低高さを130pxへ縮小 */
    padding:13px 14px; /* 上下13px・左右14pxへ縮小 */
  }

}

// 大文字変換用のテキストエリアを取得
const uppercaseTextarea=
  document.getElementById("uppercase-textarea");

// 小文字変換用のテキストエリアを取得
const lowercaseTextarea=
  document.getElementById("lowercase-textarea");

/*
  大文字変換用テキストエリアへ入力されたときに
  入力内容を大文字へ変換する
*/
uppercaseTextarea.addEventListener("input",function(){

  // 入力内容を大文字へ変換してテキストエリアへ再設定
  uppercaseTextarea.value=
    uppercaseTextarea.value.toUpperCase();

});

/*
  小文字変換用テキストエリアへ入力されたときに
  入力内容を小文字へ変換する
*/
lowercaseTextarea.addEventListener("input",function(){

  // 入力内容を小文字へ変換してテキストエリアへ再設定
  lowercaseTextarea.value=
    lowercaseTextarea.value.toLowerCase();

});

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは、小文字のアルファベットを大文字へ変換するテキストエリアと、大文字のアルファベットを小文字へ変換するテキストエリアを配置します。CSSではフォーム全体や各入力欄のデザインを設定し、JavaScriptでは入力内容をリアルタイムで大文字または小文字へ変換します。入力自体は制限せず、数字・日本語・記号などもそのまま入力できます。

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

各ファイルの役割
index.htmlは入力フォーム全体を構成するファイルです。ページタイトル、「大文字・小文字を自動変換」のタイトル、説明文、「小文字 → 大文字」「大文字 → 小文字」のラベル、プレースホルダー、補足文を変更できます。小文字を大文字へ変換する入力欄と、大文字を小文字へ変換する入力欄の2つのテキストエリアを配置しています。

style.cssはページ全体、フォーム、タイトル、説明文、ラベル、テキストエリア、補足文のデザインを設定するファイルです。フォームの最大横幅、余白、背景色、枠線、角丸、テキストエリアの高さ、文字サイズ、フォーカス時の枠線色や影などを変更できます。

script.jsは入力内容を自動変換するファイルです。上側のテキストエリアではtoUpperCase()を使用して小文字のアルファベットを大文字へ変換し、下側のテキストエリアではtoLowerCase()を使用して大文字のアルファベットを小文字へ変換します。数字・日本語・記号・改行などは大文字・小文字の変換対象にならないため、そのまま残ります。

設置方法・使い方
sampleフォルダを作成し、その中へindex.html・style.css・script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。上側のテキストエリアへ小文字のアルファベットを入力すると大文字へ、下側のテキストエリアへ大文字のアルファベットを入力すると小文字へリアルタイムで変換されます。数字・日本語・記号を含む文字列や、改行を含む複数行の文章も入力できます。

カスタマイズできる内容
index.htmlではページタイトル、フォーム内のタイトル、説明文、「小文字 → 大文字」「大文字 → 小文字」のラベル、プレースホルダー、各入力欄の補足文を変更できます。商品コードや識別コードなど、使用する内容に合わせて表示する文章を編集できます。

style.cssではページとフォームの背景色、最大横幅、余白、枠線、角丸、テキストエリアの高さ、文字サイズ、行間、フォーカス時の枠線色や影を変更できます。resize:vertical;によってテキストエリアは上下方向へ高さを変更できるため、この値を変更することでリサイズ方法も調整できます。

script.jsでは、toUpperCase()が小文字から大文字への変換、toLowerCase()が大文字から小文字への変換を担当しています。テキストエリアのIDを変更する場合は、index.htmlのidとscript.jsのgetElementById()へ指定するIDを一致させてください。

数値調整
style.css

padding:40px 20px;
ページ全体の内側余白です。40pxは上下、20pxは左右の余白を表します。値を大きくすると画面端との間隔が広がり、小さくすると狭くなります。

max-width:700px;
フォーム全体の最大横幅です。値を大きくするとフォームをより横長に表示でき、小さくするとコンパクトになります。

margin:40px auto;
フォーム全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。autoによって左右中央へ配置します。

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

border:1px solid #dbe4f0;
フォーム全体の枠線です。1pxを大きくすると枠線が太くなります。#dbe4f0を変更すると枠線の色を調整できます。

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

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

font-size:22px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。

line-height:1.5;
タイトル、ラベル、補足文に設定している行間です。値を大きくすると行間が広がり、小さくすると狭くなります。

margin:0 0 24px;
説明文の下側余白です。24pxを大きくすると最初の入力グループとの間隔が広がり、小さくすると狭くなります。

font-size:16px;
説明文、ラベル、テキストエリアの入力文字に設定している文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。

line-height:1.8;
説明文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。

margin-bottom:24px;
2つの入力グループの間隔です。値を大きくすると上下の入力欄が離れ、小さくすると近くなります。

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

min-height:150px;
テキストエリアの最低高さです。値を大きくすると最初から高く表示され、小さくすると低くなります。

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

border:2px solid #cbd5e1;
テキストエリアの通常時の枠線です。2pxを大きくすると枠線が太くなります。#cbd5e1を変更すると枠線の色を調整できます。

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

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

transition:border-color 0.3s ease, box-shadow 0.3s ease;
テキストエリアへフォーカスしたときの枠線と影の切り替え時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。

box-shadow:0 0 0 4px rgba(37,99,235,0.12);
テキストエリアへフォーカスしたときに表示する外側の強調表示です。4pxを大きくすると強調範囲が広がり、小さくすると狭くなります。

margin-top:6px;
テキストエリアと補足文の間隔です。6pxを大きくすると間隔が広がり、小さくすると近くなります。

font-size:14px;
補足文の文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。

max-width:640px
スマートフォン向けのスタイルへ切り替える画面幅です。画面幅が640px以下になると、メディアクエリ内の設定が適用されます。

padding:24px 12px;
画面幅640px以下で使用するページ全体の内側余白です。24pxは上下、12pxは左右の余白を表します。

margin:24px auto;
画面幅640px以下で使用するフォーム全体の上下余白です。24pxを変更するとスマートフォン表示時の上下間隔が変わります。

padding:24px 18px;
画面幅640px以下で使用するフォーム全体の内側余白です。24pxは上下、18pxは左右の余白を表します。

min-height:130px;
画面幅640px以下で使用するテキストエリアの最低高さです。値を変更するとスマートフォン表示時の初期高さが変わります。

padding:13px 14px;
画面幅640px以下で使用するテキストエリアの内側余白です。13pxは上下、14pxは左右の余白を表します。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、画面幅に合わせてフォーム全体が縮小されます。また、画面幅640px以下ではページとフォームの余白、テキストエリアの最低高さ、内側余白を小さくするメディアクエリを設定しています。