UI HACK 
※本ページはプロモーションが含まれています。
本記事は、「textareaを使っているけど、スクロールバーのカスタマイズが難しい…」と思いつつ
・テキストエリアのデフォルトの見た目が気に入らない人
・textareaを使っているけど、スクロールバーのカスタマイズが難しい人
・ユーザーが入力したテキストの改行を正しく表示させたいんだけど、どうすればいいのか分からない人
上記のような、悩みや疑問を持っている、プログラミングを勉強したい人向けに現役エンジニアが解説します。
この記事では、「前半」では「textarea要素の基礎知識と使い方」を「後半」では「textareaの自動リサイズ方法」や「入力欄にカーソルを合わせるときにデザインを変更」する方法を詳しく解説します。
プログラミング未経験の方でも、読みやすい内容なので、本記事を読んで未来に向けて、一歩を踏み出しましょう。
それでは、ご一読ください！
textarea要素は、Webページやアプリでテキストを入力する場所を作るためのツールです。例えば、コメントを書く欄やメッセージを送信する欄などに使われます。この記事では、HTML textarea要素の基本的な使い方を分かりやすく解説します。
1.HTML textarea要素の基本の使い方
HTML textarea要素を使うと、次のようなテキスト入力欄を作ることができます。
【完成デモ】textarea要素の基本の使い方
HTML
<textarea rows="4" cols="50"></textarea>これで、4行分のテキストが入る入力欄が表示されます。
2.デフォルトのテキストを指定する
このテキスト入力欄は、最初は何も書いていない状態ですが、デフォルトのテキストを指定することができます。
【完成デモ】デフォルトのテキストを指定
HTML
<textarea rows="4" cols="50">ここにテキストを入力してください。</textarea>これで、入力欄に最初から「ここにテキストを入力してください。」と表示されるようになります。
3.フォームとして使う
HTML textarea要素は、フォームの一部として使われることが多いです。例えば、お問い合わせフォームのメッセージ欄などに使われます。次のように使います。
【完成デモ】フォームとして使う
HTML
<form action="/submit" method="post">
<textarea name="user_message" rows="6" cols="50"></textarea>
<input type="submit" value="送信">
</form>このようにすると、ユーザーがメッセージを入力して「送信」ボタンを押すと、メッセージがサーバーに送信されます。
4.必須入力やその他の設定
また、入力欄を必ず埋めてもらいたい場合は、次のように required という属性を追加します。
【完成デモ】必須入力やその他の設定
HTML
<textarea name="user_message" rows="6" cols="50" required></textarea>さらに、リサイズ（大きさを変えること）を無効にしたり、最初からフォーカス（カーソルが自動的に入力欄に表示されること）を設定することもできます。
textarea要素は、Webページやアプリでテキストを入力する場所を作るための場所です。
フォームの一部として使われることが多く、必須入力やリサイズ、フォーカスの設定もできます。
プログラムを書く際に、テキスト入力欄を作成する方法には、Inputタグとtextareaタグの2つがあります。それぞれの違いを簡単に説明しますね。
inputタグ
inputタグは、一行だけのテキスト入力欄を作成するときに使います。例えば、ユーザー名やパスワードを入力する欄などです。inputタグは次のように書きます。
【完成デモ】inputタグ
HTML
<input type="text" name="username">上記のコードでは、“username” という名前のテキストボックスが表示されます。
textareaタグ
textareaタグは、複数行のテキスト入力欄を作成するときに使います。例えば、ブログ記事の本文やお問い合わせフォームのメッセージを入力する欄などです。textareaタグは次のように書きます。
【完成デモ】textareaタグ
HTML
<textarea name="message" rows="4" cols="50"></textarea>念のため、前の章でも解説しましたが、上記のコードでは、4行分のテキストが入る入力欄が表示されます。
inputタグとtextareaタグの使い分けのポイント
inputタグは短いテキストを入力させるときに使い、textareaタグは長い文章を入力させるときに使います。
例えば、ログインフォームのユーザー名やパスワードにはInputタグを使い、ブログの記事を書く欄やお問い合わせフォームのメッセージ欄にはtextareaタグを使います。
inputタグとtextareaタグの使い方の違い
inputタグには type 属性を使って入力の種類を指定しますが、textareaタグにはそのような属性はありません。また、textareaタグには rows 属性と cols 属性を使って、入力欄の大きさを指定することができます。
| inputタグ | textareaタグ | |
|---|---|---|
| 用途 | 一行のテキスト入力欄を作成する | 複数行のテキスト入力欄を作成する |
| 書き方 | <input type=”text” name=”username”> | <textarea name=”message” rows=”4″ cols=”50″></textarea> |
| 属性 | type属性で入力欄の種類を指定 | 行数(rows)と列数(cols)を指定 |
| 使い分け | 短いテキストを入力させる場合に適している | 長い文章やコメントを入力させる場合に適している |
Inputタグは一行だけの短いテキストを入力させる場合に使い、type 属性で入力欄の種類を指定します。一方、textareaタグは複数行の長い文章やコメントを入力させる場合に適しており、rows 属性と cols 属性で入力欄の大きさを指定します。適切に使い分けることで、ユーザーにとって使いやすいテキスト入力欄を提供できます。
HTMLのtextarea要素を使って、ユーザーがテキストを入力する入力欄を作ることができると以前に解説しましたが、より便利にする為に、入力欄を自動的にリサイズして、ユーザーが快適に入力できるようにする方法を説明しますね。
1.CSSを使った自動リサイズの実装
まず1つ目の方法は、CSSというスタイルを指定する言語を使う方法です。resizeというプロパティを使って、入力欄を垂直方向に自動的にリサイズすることができます。
【完成デモ】CSSを使った自動リサイズの実装
HTML
<!-- 自動リサイズが有効なtextarea要素 -->
<textarea id="myTextarea"></textarea>CSS
textarea {
resize: vertical;
width: 300px; /* 入力欄の横幅を指定（例として300pxに設定） */
height: 100px; /* 入力欄の最初の高さを指定（例として100pxに設定） */
}上記のHTMLコードでは、CSSのresize: vertical;により自動リサイズ機能を有効にしています。
また、widthとheightで入力欄の初期のサイズを指定しています（例として300pxの横幅(width)と100pxの高さ(height)に設定していますが、実際の使用に合わせて適切な値を設定してください）。
フォーカスイベントを使って、入力欄にカーソルを合わせるときと外すときに、スタイル（見た目）を変える方法を説明します。
フォーカスイベントとは？
フォーカスイベントは、入力欄にカーソルを合わせたり外したりすると発生するイベントのことです。入力欄にカーソルを合わせるときには、その入力欄がアクティブになり、外すと非アクティブになります。
【完成デモ】フォーカスイベント
このJavaScriptのコードでは、changeStyle関数がisFocusedという引数を受け取ります。
この引数にはtrueまたはfalseが渡されます。trueはフォーカスが合わさったとき（アクティブな状態）、falseはフォーカスが外れたとき（非アクティブな状態）を表します。それに応じて、入力欄のスタイルを変更しています。
この例では、フォーカスが合わさったときに入力欄の背景色を淡い青（lightblue）、文字色を黒に変え、フォーカスが外れたときに背景色を白、文字色を灰色に戻すようにしています。
今回は、textarea要素の基礎知識と使い方についてご紹介しました。
それでは、最後にもう一度、おさらいしましょう。
- textarea要素の基礎知識と使い方をわかりやすく解説
- inputタグとtextareaタグの基本的な違いとは？
- textarea自動リサイズの実装方法
- フォーカスイベントを使った動的なスタイル変更の実装
もう一度、最初から「textarea要素の基礎知識と使い方をわかりやすく解説」を読む↑
Twitterも見てみる？
