「自分でWebツールを作ってみたいけれど、プログラミングは難しそう…」と思ったことはありませんか？
実は、HTMLとJavaScriptを使えば、初心者でもすぐに動くツールを作ることができます。今回はその具体例として、シンプルで実用的な 大文字小文字変換ツール を作ってみましょう。
入力したテキストを「大文字→小文字」「小文字→大文字」「単語の頭を大文字」に変換でき、さらにコピー機能まで搭載した便利なツールです。この記事では、完成コードをそのままコピペして動かすだけで試せる ので、プログラミングの知識がなくても安心です。
「まずは自分の手で何かを作ってみたい」という方にぴったりの内容になっていますので、ぜひ最後まで一緒に進めてみてください。
完成イメージを確認しよう
まずは、これから作る「大文字小文字変換ツール」がどんなものかをイメージしてみましょう。
このツールはとてもシンプルで、使い方は3ステップです。
- 入力欄に文章を入力する
- 「大文字→小文字」「小文字→大文字」「単語の頭のみ大文字」いずれかのボタンをクリック
- 出力欄に変換された文章が表示され、「コピー」ボタンで簡単にコピーできる
【実際の大文字小文字変換ツールの動作を試してみたい方はこちらからどうぞ】▼
完成形を先に知っておくと、これから書くコードが“どの部分に対応しているのか”わかりやすいですよ
事前準備
大文字小文字変換ツールを作るために、特別な環境は必要ありません。用意するものは、次の3つだけです。
- PC（Windows / Mac どちらでもOK）
- ブラウザ（Chrome、Edge、Safari など）
- テキストエディタ（メモ帳やVS Codeなど）
つまり、すでにPCを持っていればすぐに始められます。追加のソフトをインストールする必要もなく、すべて無料で完結します。
今回は“HTMLファイルを1つ作って保存するだけ”で動かせます。環境構築は不要だから安心してください。
ツールを動かしてみよう！【大文字小文字変換ツールの作り方】
まずは完成版を体験してみましょう。
以下のコードをそのままコピー＆ペーストし、テキストエディタに貼り付けてください。
ファイル名を 「index.html」 として保存し、ブラウザで開けばツールがすぐに動きます。
コード全文（コピペ用）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>大文字小文字変換ツール</title> <style> :root { --main-bg-color: #f4f4f9; --container-bg-color: #ffffff; --text-color: #333333; --button-color: #4a90e2; --button-hover-color: #357bd2; --border-color: #dddddd; --box-shadow-color: rgba(0, 0, 0, 0.1); } @media (prefers-color-scheme: dark) { :root { --main-bg-color: #1e1e2f; --container-bg-color: #2a2a3e; --text-color: #e0e0e0; --button-color: #5d5d81; --button-hover-color: #7b7b9e; --border-color: #444455; --box-shadow-color: rgba(0, 0, 0, 0.2); } } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: var(--main-bg-color); color: var(--text-color); margin: 0; padding: 20px; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; box-sizing: border-box; } .container { width: 100%; max-width: 700px; background-color: var(--container-bg-color); padding: 30px; border-radius: 12px; box-shadow: 0 4px 12px var(--box-shadow-color); text-align: center; } h1 { color: var(--text-color); margin-bottom: 25px; font-size: 1.8rem; } .input-area, .output-area { margin-bottom: 20px; } textarea { width: 100%; height: 150px; padding: 15px; font-size: 1rem; border: 1px solid var(--border-color); border-radius: 8px; resize: vertical; box-sizing: border-box; background-color: var(--container-bg-color); color: var(--text-color); transition: border-color 0.3s; } textarea:focus { border-color: var(--button-color); outline: none; } .controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-bottom: 20px; } .btn { padding: 12px 25px; font-size: 1rem; font-weight: bold; border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.3s, transform 0.1s; color: white; background-color: var(--button-color); } .btn:hover { background-color: var(--button-hover-color); } .btn:active { transform: scale(0.98); } .counter { margin-top: 10px; font-size: 0.9rem; color: #777; } .copy-btn-container { margin-top: 15px; text-align: right; } .copy-btn { background-color: #28a745; } .copy-btn:hover { background-color: #218838; } @media (max-width: 600px) { .container { padding: 20px; } .controls { flex-direction: column; gap: 10px; } .btn { width: 100%; } } </style> </head> <body> <div class="container"> <h1>大文字小文字変換ツール</h1> <div class="input-area"> <textarea id="inputText" placeholder="ここにテキストを入力してください..."></textarea> <div class="counter">文字数: <span id="charCount">0</span></div> </div> <div class="controls"> <button class="btn" onclick="toLowerCase()">すべて小文字に</button> <button class="btn" onclick="toUpperCase()">すべて大文字に</button> <button class="btn" onclick="toCapitalize()">単語の頭のみ大文字に</button> </div> <div class="output-area"> <textarea id="outputText" placeholder="変換結果が表示されます" readonly></textarea> <div class="copy-btn-container"> <button id="copyBtn" class="btn copy-btn">コピー</button> </div> </div> </div> <script> const inputText = document.getElementById('inputText'); const outputText = document.getElementById('outputText'); const charCount = document.getElementById('charCount'); const copyBtn = document.getElementById('copyBtn'); // 文字数カウント inputText.addEventListener('input', () => { charCount.textContent = inputText.value.length; }); // すべて小文字に変換 function toLowerCase() { outputText.value = inputText.value.toLowerCase(); } // すべて大文字に変換 function toUpperCase() { outputText.value = inputText.value.toUpperCase(); } // 単語の頭のみ大文字に変換 function toCapitalize() { const words = inputText.value.split(' '); const capitalizedWords = words.map(word => { if (word.length === 0) { return ''; } return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase(); }); outputText.value = capitalizedWords.join(' '); } // コピー機能 copyBtn.addEventListener('click', () => { if (outputText.value) { navigator.clipboard.writeText(outputText.value).then(() => { const originalText = copyBtn.textContent; copyBtn.textContent = 'コピー完了！'; copyBtn.style.backgroundColor = '#218838'; setTimeout(() => { copyBtn.textContent = originalText; copyBtn.style.backgroundColor = '#28a745'; }, 1500); }).catch(err => { console.error('コピーに失敗しました:', err); alert('コピーに失敗しました。'); }); } }); </script> </body> </html> |
最初から難しいことを覚えなくても大丈夫。まずは“動く体験”をしてみよう！
なぜ動くのか？コードの仕組みを解説
「どうしてコピペしただけで動くの？」と疑問に思う方もいるでしょう。
実は、このツールは HTML・CSS・JavaScript の3つで構成されています。
1. HTML：ページの骨組みを作る
HTMLはウェブページの「骨組み」。
入力ボックスやボタンなど、ツールのパーツを配置する役割を持っています。
例：
|
1 2 |
<textarea id="inputText"></textarea> <!-- ユーザーが文字を入力する欄 --> <button onclick="toLowerCase()">小文字に変換</button> <!-- クリック可能なボタン --> |
2. CSS：見た目を整える
CSSはHTMLで作った骨組みに「デザイン」を加える役割。
色や形、余白を指定して、ツールを見やすく使いやすくしています。
例：
|
1 2 |
body { background: #f9f9f9; color: #333; } /* ページ全体の色を設定 */ .btn { padding: 8px; border-radius: 5px; } /* ボタンのデザイン */ |
さらに、@media ルールを使うことでスマホ画面に対応（レスポンシブデザイン）が可能です。
3. JavaScript：ツールに命を吹き込む
JavaScriptはウェブページに「動き」や「機能」を与えます。
今回の大文字小文字変換やコピー機能はすべてJavaScriptで実現しています。
① HTML要素の取得
|
1 |
const inputText = document.getElementById('inputText'); |
→ HTMLで指定した「id」をJavaScriptから操作できるようにする命令。
② イベントの検知
|
1 2 3 |
inputText.addEventListener('input', () => { charCount.textContent = inputText.value.length; }); |
→ 入力されるたびに文字数を数える処理。
③ 文字列の変換処理
|
1 2 |
outputText.value = inputText.value.toLowerCase(); // 小文字へ変換 outputText.value = inputText.value.toUpperCase(); // 大文字へ変換 |
→ .toLowerCase()は、文字列をすべて小文字に変換するメソッドです。
→ .toUpperCase()は、文字列をすべて大文字に変換するメソッドです。
④ コピー機能の実装
|
1 |
navigator.clipboard.writeText(outputText.value); |
→ 出力されたテキストをワンクリックでコピー可能。
ポイントまとめ
- HTML：パーツを配置する → 「骨組み」
- CSS：見た目を整える → 「デザイン」
- JavaScript：動きを与える → 「機能」
3つを組み合わせることで、シンプルな大文字小文字変換ツールが完成します。
もっと便利に！大文字小文字変換ツールに追加したい機能3選
「大文字小文字変換ツール」はシンプルで十分使えますが、ちょっと機能を追加するだけでさらに便利になります。
ここでは、初心者でも取り入れやすい 3つのおすすめ機能 を紹介します。
1. リアルタイム変換機能
入力するたびに自動で変換結果を表示する機能です。
ボタンを押さなくても、文字を打ち込んだ瞬間に変換結果が右側に表示されます。
メリット
- ボタンを押す手間がなくなり、作業効率が大幅にアップ
- 入力した瞬間に結果を確認でき、ストレスなく操作できる
実装のヒント
|
1 2 3 |
inputText.addEventListener('input', () => { outputText.value = inputText.value.toLowerCase(); // 例：常に小文字に変換 }); |
空白文字の自動トリミング機能
入力したテキストの 先頭や末尾の余分なスペース（空白）を自動で削除 する機能です。
メリット
- 不要なスペースでレイアウトが崩れるのを防げる
- 文字数カウントも正確になり、ユーザーは余計な心配をしなくて済む
実装のヒント
|
1 |
const trimmedText = inputText.value.trim(); |
.trim() を使えば、前後の空白を削除できますよ。
テキストの履歴機能
過去に変換したテキストを記録しておき、あとから呼び出せる機能 です。
メリット
- 頻繁に同じテキストを使う人の入力の手間を省ける
- 履歴が残ることで「また使いたい」と思わせ、リピーターを増やせる
実装のヒント
|
1 2 3 4 5 |
// 保存 localStorage.setItem('history', inputText.value); // 呼び出し const history = localStorage.getItem('history'); |
localStorage を使えば、ブラウザを閉じてもデータが残るようになりますよ。
初心者におすすめ！大文字小文字変換ツールづくりから学べるリソース集
ここまでツールを作ってみて「もっとHTMLやJavaScriptを学んでみたい！」と思った方も多いはずです。
そんな方に向けて、基礎をしっかり学べるリソースを紹介します。
おすすめの書籍
『確かな力が身につくJavaScript超入門』（SBクリエイティブ）
- JavaScriptを基礎から丁寧に学べる入門書。
- 実践的なサンプルも豊富で、今回のツールのような小さなアプリを自分で作れるようになります。
- 初学者にぴったりの1冊です。
『スラスラわかるHTML＆CSSのきほん』（SBクリエイティブ）
- Web制作初心者に最適な入門書。HTMLとCSSの仕組みをやさしく解説。
- これからWebページを作ってみたい方にぴったり。
- レイアウトの基本やスタイルの調整方法など、実践的に学べます。
オンライン講座編
Udemy｜世界最大級のオンライン学習プラットフォーム
世界中で利用されるオンライン学習サイト。
HTML、CSS、JavaScriptの入門から応用まで、高評価の講座が数百種類揃っています。
初心者でも動画を見ながら手を動かせるので、挫折しにくいのが魅力です。
ポイントまとめ
- 書籍で基礎を理解し、オンライン講座で手を動かす
- 「大文字小文字変換ツール」のような小さな成功体験を積み重ねる
- 学んだことを少しずつツールに追加していく
この流れを繰り返すことで、自然とプログラミングのスキルが身についていきます。
まとめ｜大文字小文字変換ツールを作ってみよう
今回は、大文字小文字変換ツールの作り方 を解説しました。
- HTML で骨組みを作り
- CSS でデザインを整え
- JavaScript で「変換」「コピー」といった機能を実装
この3つを組み合わせるだけで、シンプルながら実用的なWebツールを完成させることができました。
さらに、リアルタイム変換や履歴保存などの追加機能アイデアも紹介しました。少しずつ改造していくことで、世界に一つだけのオリジナルツールに育てていけます。
プログラミングは「手を動かすこと」で理解が深まります。
今回のツールをきっかけに、ぜひ次のステップへ進んでみてください。
関連記事
【実際の大文字小文字変換ツールの動作を試してみたい方はこちらからどうぞ】▼
【作り方記事】全角半角＆ひらがなカタカナ変換ツールの作り方｜HTMLとJavaScriptで簡単実装 ▼
【作り方記事】テキスト置換ツールの作り方を初心者向けに解説｜HTMLとJavaScriptで業務効率UPツールを自作！ ▼
