Webサイトの問い合わせフォームやコメント欄など、ユーザーから複数行の入力を受け取る際に欠かせないのがHTMLの<textarea>タグです。
一行用の入力欄である<input type="text">とは異なり、長文の入力に適した設計となっており、ブログの投稿画面やアンケートの自由記述欄などで広く活用されています。
基本的なタグの書き方は非常にシンプルですが、ユーザーにとって使いやすいフォームを実現するためには、改行の挙動や文字数制限、CSSによるスタイリングなどの詳細な設定が重要になります。
本記事では、HTMLの<textarea>タグの基本的な使い方から、実務でよく使われる属性、そして最新のブラウザ仕様に合わせた制御方法までを詳しくご紹介します。
<textarea>タグの基本的な使い方と特徴
<textarea>タグは、ユーザーが複数行のテキストを入力できる領域を作成するためのHTML要素です。
この要素は、開始タグ<textarea>と終了タグ</textarea>をセットで使用し、その間に初期値を記述することができます。
一般的な<input>タグは空要素（終了タグがない要素）ですが、textareaは必ず終了タグが必要である点に注意してください。
まず、最も基本的なマークアップの例を確認してみましょう。
<!-- 基本的なテキストエリアの例 -->
<label for="message">お問い合わせ内容：</label>
<textarea id="message" name="message"></textarea>[ お問い合わせ内容： ]
[____________________]
[____________________]
[____________________]上記のコードでは、id属性とname属性を指定しています。
id属性は<label>要素と紐付けるために使用し、name属性はサーバー側にデータを送信する際の識別子として機能します。
タグの間に改行やスペースを含めると、それがそのまま初期値として表示されてしまうため、初期値を空にしたい場合はタグを連続して記述するのが一般的です。
サイズを指定するrows属性とcols属性
テキストエリアの初期表示サイズは、rows属性とcols属性で制御できます。
rows属性は行数を指定し、cols属性は一行あたりの文字数（幅）を指定します。
<!-- 5行表示、40文字幅の指定 -->
<textarea name="comment" rows="5" cols="40">
ここに初期テキストが入ります。
</textarea>ただし、現代のWeb制作においては、これらの属性よりもCSSのwidthやheightプロパティでサイズを調整することが推奨されます。
デバイスの画面サイズに合わせて柔軟に大きさを変えるレスポンシブデザインに対応しやすいためです。
改行の挙動を制御するwrap属性
テキストエリア内で入力された改行を、送信時にどのように扱うかを決めるのがwrap属性です。
この属性には主に「soft」と「hard」の2種類の値を指定することができます。
| 値 | 挙動の解説 |
|---|---|
| soft | デフォルトの設定です。画面上では自動改行されますが、送信データには改行コードが含まれません。 |
| hard | 画面上の自動改行位置に、実際の改行コード（CRLF）を挿入して送信します。cols属性の指定が必須です。 |
一般的にはsoft（または属性自体の省略）が使われることが多いですが、メール送信システムなどで1行の長さを制限したい場合にはhardが重宝されます。
送信されるデータ形式に影響を与える設定であることを意識して選択しましょう。
文字数制限を設定する方法：maxlengthとminlength
ユーザーに入力してもらう文字の範囲を限定したい場合、HTML属性で簡単に制限をかけることができます。
ここでは、最大文字数と最小文字数を指定する属性について解説します。
最大文字数を制限するmaxlength属性
maxlength属性を使用すると、指定した文字数以上の入力を直接制限することができます。
例えば、140文字以内の入力を求めたい場合は以下のように記述します。
<!-- 最大140文字に制限 -->
<textarea name="tweet" maxlength="140" placeholder="今の気持ちを入力してください"></textarea>この属性が設定されていると、ユーザーが制限文字数に達した時点でそれ以上の文字が打てなくなります。
ユーザーにとっては「なぜ入力できないのか」が分かりにくい場合があるため、現在の文字数をカウントして表示するUIと組み合わせるのがベストプラクティスです。
最小文字数を指定するminlength属性
一方で、最低でも一定以上の文字数を入力させたい場合にはminlength属性を使用します。
<!-- 最低10文字以上の入力を必須とする -->
<textarea name="feedback" minlength="10" required></textarea>minlengthを設定しても、入力自体は制限されませんが、送信時にブラウザのバリデーション機能によって「○文字以上で入力してください」といった警告が表示されます。
required属性と併用することで、空送信を防ぎつつ適切な長さの回答を促すことが可能です。
便利な属性とユーザービリティの向上
<textarea>には、操作性を高めるための便利な属性が他にも用意されています。
これらを適切に組み合わせることで、入力ストレスの少ないフォームを作成できます。
placeholder属性
入力欄が空の時に表示されるヒントテキストです。
「具体的にお書きください」や「例：東京都渋谷区…」といった具体的な例を示すことで、ユーザーの迷いを払拭できます。
readonly属性とdisabled属性
readonlyは編集不可ですが値の送信は可能な状態、disabledは選択も送信も不可能な状態を指します。
利用規約を表示してスクロールだけさせる場合や、特定の条件を満たさない限り入力を受け付けない制御に利用されます。
autofocus属性
ページ読み込み時に、自動的にそのテキストエリアにフォーカスを合わせます。
検索専用のページやメッセージ投稿画面など、主要な機能がテキスト入力である場合に非常に有効です。
CSSによるデザインとサイズの制御
デフォルトのテキストエリアは、ブラウザごとに見た目が異なり、またユーザーが右下のつまみをドラッグして自由にサイズを変更できてしまいます。
デザインの崩れを防ぐためには、CSSでの制御が不可欠です。
サイズ変更の制限（resizeプロパティ）
ユーザーによるサイズ変更を制御するには、CSSのresizeプロパティを使用します。
/* 縦方向のみ変更可能にする */
textarea {
resize: vertical;
min-height: 100px;
max-height: 500px;
}
/* サイズ変更を完全に禁止する */
textarea.no-resize {
resize: none;
}resize: none;を指定するとデザインは固定されますが、長文を入力するユーザーにとっては不便になる可能性があるため、基本的にはvertical（縦方向のみ）を推奨します。
2026年の最新手法：field-sizingプロパティ
近年、入力内容に合わせて自動的にテキストエリアの高さが伸び縮みする「オートリサイズ」の需要が高まっています。
かつてはJavaScriptによる複雑な計算が必要でしたが、最新のCSS仕様ではfield-sizingプロパティが注目されています。
/* 内容に合わせて自動で高さが変わる設定 */
textarea {
field-sizing: content;
min-height: 3lh; /* 最低3行分を確保 */
}このプロパティを使用することで、追加のスクリプトなしにモダンなチャットツールのような入力体験を提供できるようになります。
JavaScriptを組み合わせた文字数カウントの実装
maxlength属性だけでは、ユーザーが「あと何文字打てるのか」を把握できません。
そこで、入力のたびに文字数をカウントして動的に表示するJavaScriptの実装例を紹介します。
<div class="input-container">
<textarea id="js-textarea" maxlength="200" rows="5"></textarea>
<p>現在の文字数：<span id="char-count">0</span> / 200</p>
</div>
<script>
const textarea = document.getElementById('js-textarea');
const countDisplay = document.getElementById('char-count');
textarea.addEventListener('input', () => {
const length = textarea.value.length;
countDisplay.textContent = length;
// 制限に近づいたら色を変える演出
if (length > 180) {
countDisplay.style.color = 'red';
} else {
countDisplay.style.color = 'black';
}
});
&script>このようにinputイベントを監視することで、貼り付け操作などにも対応した正確なカウントが可能です。
リアルタイムなフィードバックはアクセシビリティの観点からも高く評価されます。
アクセシビリティへの配慮
テキストエリアを配置する際は、スクリーンリーダーを使用するユーザーやキーボード操作のみを行うユーザーへの配慮も重要です。
必ず<label>要素を使用して、どの項目に対する入力欄なのかを明示しましょう。
また、エラーメッセージや入力例を関連付ける場合は、aria-describedby属性を使用して支援技術に情報を伝えます。
<label for="bio">自己紹介</label>
<textarea id="bio" aria-describedby="bio-hint"></textarea>
<p id="bio-hint">※経歴や得意な言語を記入してください。</p>フォーカスが当たった時の枠線（アウトライン）をCSSで消してしまう（outline: none;）と、キーボード操作中のユーザーが現在位置を見失ってしまいます。
デザイン上変更したい場合でも、必ず代わりのフォーカススタイルを定義するようにしてください。
よくあるトラブルと解決策
開発中によく遭遇する問題の一つに、PHPやJavaScriptで値を受け取った際に改行コードが消えてしまう、あるいは重複してしまう現象があります。
これはOS（Windows, Mac, Linux）によって改行コードが異なる（CRLF, LF）ことが原因です。
サーバーサイドで処理する際は、改行コードを正規化するか、HTMLで表示する際にnl2brのような関数を使って<br>タグに変換する必要があります。
また、テキストエリア内の余計な空白を削除したい場合は、HTMLタグの開始から終了までを一行で書くか、CSSのwhite-space: pre-wrap;を適切に設定することで解決できます。
まとめ
HTMLの<textarea>タグは、単に複数行の入力を可能にするだけでなく、属性の組み合わせやCSS、JavaScriptによる制御次第で非常に強力なUI要素となります。
maxlengthによる文字数制限や、wrap属性による改行の扱いといった基本設定を理解した上で、field-sizingなどの最新プロパティを積極的に取り入れることが、使いやすいWebサイトへの第一歩です。
ユーザーが迷わず、快適にテキストを入力できる環境を整えることは、最終的にコンバージョン率や満足度の向上に直結します。
今回解説した各機能を、ぜひご自身のプロジェクトで活用してみてください。