目次
はじめに：textareaの高さが合わない問題
フォームを作っていると、
- textareaが小さすぎて入力しづらい
- 高さを変えたいけど方法が分からない
- CSSで指定したのに反映されない
と悩むことはありませんか？
textareaは、
HTMLとCSSの両方で高さを制御できる要素です。
ただし、それぞれ役割と使いどころが異なります。
この記事では、
HTML初心者の方でも迷わないように
textareaの高さを調整するすべての方法を
基礎から順番に解説します。
textareaとは？
textarea は、
複数行のテキスト入力に使うHTML要素です。
<textarea name="message"></textarea>お問い合わせフォームや
コメント欄などでよく使われます。
方法①：rows属性で高さを指定する
最も基本的な方法が、
rows 属性による指定です。
<textarea name="message" rows="5"></textarea>rowsの特徴
- 行数で高さを指定する
- フォントサイズに依存する
- HTMLだけで簡単に調整できる
初心者の方は、
まずこの方法を覚えるのがおすすめです。
rows指定の注意点
rowsは「行数」指定のため、
- デザイン通りの高さにならない
- CSSで微調整しづらい
というデメリットもあります。
方法②：CSSでheightを指定する
見た目を正確に制御したい場合は、
CSSで高さを指定します。
textarea {
height: 150px;
}特徴
- ピクセル単位で調整できる
- デザインに合わせやすい
実務では、
rows＋CSSの併用がよく使われます。
rowsとCSSを併用する例
<textarea name="message" rows="5" class="textarea"></textarea>.textarea {
height: 160px;
}rowsは初期サイズ、
CSSはデザイン調整用として考えると分かりやすいです。
textareaのリサイズ（右下の伸縮）を無効にする
ブラウザによっては、
textarea右下にリサイズ用のつまみが表示されます。
これを無効にしたい場合は、
CSSで指定します。
textarea {
resize: none;
}他の指定例
resize: vertical; /* 縦方向のみ */
resize: horizontal; /* 横方向のみ */方法③：入力内容に応じて高さを自動調整する
入力内容に合わせて
高さを自動で伸ばしたい場合は、
JavaScriptを使います。
<textarea id="message" rows="3"></textarea>const textarea = document.getElementById('message');
textarea.addEventListener('input', () => {
textarea.style.height = 'auto';
textarea.style.height = textarea.scrollHeight + 'px';
});こんな場面におすすめ
- チャット入力欄
- コメント投稿フォーム
textareaの高さが反映されない原因
高さが変わらない場合、
次を確認してください。
- CSSが正しく読み込まれているか
- min-height / max-height が指定されていないか
- box-sizing の影響を受けていないか
textarea {
box-sizing: border-box;
}box-sizingの指定によって、
見た目の高さが変わることがあります。
スマホ表示でのtextarea高さ調整
スマホでは、
textareaが小さすぎると入力しづらくなります。
@media (max-width: 768px) {
textarea {
height: 200px;
}
}レスポンシブ対応として、
画面サイズごとに高さを変えるのも効果的です。
textareaとUX（使いやすさ）
textareaの高さは、
ユーザー体験に直結します。
- 小さすぎる → 入力ストレス
- 大きすぎる → 画面が間延び
入力内容の量を想定して、
適切な高さを設定しましょう。
よくある勘違い
初心者が誤解しやすい点です。
- rowsはpx指定できる
- CSSで高さを変えられない
- textareaは1行入力用
textareaは
複数行入力専用であり、
高さ調整は自由に行えます。
まとめ：textareaの高さは目的で使い分ける
textareaの高さ調整方法は、
- 簡単に指定 → rows
- デザイン重視 → CSS height
- 使いやすさ重視 → 自動伸縮（JS）
と、目的によって使い分けるのがポイントです。
HTML初心者の方は、
まず rowsとCSSでの調整を理解し、
必要に応じて自動調整を取り入れてみてください。
正しく設定することで、
フォームの使いやすさは大きく向上します。