目次
- はじめに：textareaの高さがしっくりこない問題
- 結論：textareaの高さは「目的」で決める
- textareaとは何か？（基礎の確認）
- 方法①：rows属性で高さを決める
- rowsの仕組み
- rowsの落とし穴
- 方法②：CSSでheightを指定する
- メリット
- 注意点
- rows＋CSSを併用する実務パターン
- resize（右下のつまみ）を制御する
- 他の指定
- 方法③：入力内容に応じて自動伸縮させる
- なぜこれで伸びるのか？
- よくある失敗例（実務あるある）
- ① scrollHeightが効かない
- ② max-heightで止まる
- ③ 横スクロールが出る
- DevToolsでの確認手順
- スマホでtextareaが使いづらい理由
- アクセシビリティ視点も重要
- よくある誤解
- まとめ：textarea高さ調整の最適解
はじめに：textareaの高さがしっくりこない問題
フォームを作っていると、ほぼ確実にこうなります。
- textareaが小さすぎて入力しづらい
- 高さを変えたのに反映されない
- スマホだけ妙に使いづらい
- 入力するとスクロールバーが出てダサい
私も最初の案件で、
「とりあえずrowsを増やせばいいだろう」とやって、
デザインと全然合わず作り直したことがあります。
textareaの高さは単純に見えて、
HTML・CSS・JavaScriptの理解が交差するポイントです。
この記事では、
- rows属性の正しい使い方
- CSSでの高さ制御
- resize制御
- 入力内容に応じた自動伸縮
- 高さが効かない原因
- スマホで崩れる理由
まで、実務レベルで解説します。
結論：textareaの高さは「目的」で決める
textareaの高さ調整は次の3択です。
- 簡単に行数で決めたい → rows
- デザイン通りに制御したい → CSS height
- UX重視で自動伸縮させたい → JavaScript
目的を間違えると、必ずどこかで破綻します。
textareaとは何か？（基礎の確認）
textareaは複数行入力用のHTML要素です。
<textarea name="message"></textarea>お問い合わせフォーム、
コメント欄、レビュー投稿などで使われます。
inputとの違いは、
- input → 1行専用
- textarea → 複数行専用
ここ、意外と混同されがちです。
方法①：rows属性で高さを決める
最も基本的な方法です。
<textarea name="message" rows="5"></textarea>rowsの仕組み
- 行数で高さを決める
- フォントサイズに依存
- ブラウザ標準基準で表示
初心者はまずこれから。
rowsの落とし穴
rowsは「行数指定」です。
つまり、
- デザイン通りのpxにならない
- フォント変更で高さが変わる
- CSSとの微妙なズレが起きる
実務ではrowsだけでは足りません。
方法②：CSSでheightを指定する
より精密に制御するならCSS。
textarea {
height: 150px;
}メリット
- ピクセル単位で正確
- デザインに合わせやすい
注意点
rowsよりCSSが優先されます。
rows＋CSSを併用する実務パターン
<textarea rows="4" class="form-textarea"></textarea>.form-textarea {
height: 160px;
}rows → 最低ライン
CSS → デザイン微調整
この考え方が安定します。
resize（右下のつまみ）を制御する
textarea右下のリサイズ。
制御できます。
textarea {
resize: none;
}他の指定
resize: vertical;
resize: horizontal;実務では vertical のみ許可が多いです。
方法③：入力内容に応じて自動伸縮させる
チャットUIなどでは必須です。
<textarea id="message" rows="2"></textarea>const textarea = document.getElementById('message');
textarea.addEventListener('input', () => {
textarea.style.height = 'auto';
textarea.style.height = textarea.scrollHeight + 'px';
});なぜこれで伸びるのか？
scrollHeightは、
コンテンツ全体の高さ
を取得します。
一度autoに戻すことで、
高さ再計算が正しく行われます。
ここを忘れると伸びません。
よくある失敗例（実務あるある）
① scrollHeightが効かない
原因：
- box-sizingがcontent-box
- padding計算がズレる
対策：
textarea {
box-sizing: border-box;
}② max-heightで止まる
textarea {
max-height: 200px;
}知らないうちに制限していることがあります。
③ 横スクロールが出る
原因：
- width: 100vw;
- padding計算ミス
- border-box未指定
textareaはフォーム全体の崩れの原因になりやすいです。
DevToolsでの確認手順
高さが反映されないときは：
- Computedタブでheight確認
- box-sizing確認
- min/max-height確認
- scrollHeightの値をconsoleで確認
原因は必ず特定できます。
スマホでtextareaが使いづらい理由
スマホでは、
- キーボード表示で画面が圧迫される
- 高さ不足で入力しづらい
- 自動拡張しないとUXが悪化
対策例：
@media (max-width: 768px) {
textarea {
min-height: 180px;
}
}UXを考えると自動伸縮が最適解な場合も多いです。
アクセシビリティ視点も重要
☑ labelが設定されている
☑ placeholderに依存しすぎない
☑ 高さ固定で入力困難になっていない
textareaはユーザー体験に直結します。
よくある誤解
☑ rowsはpx指定できる → できない
☑ CSSで高さ変更できない → できる
☑ textareaは装飾できない → できる
textareaは意外と柔軟です。
まとめ：textarea高さ調整の最適解
- 簡単指定 → rows
- デザイン優先 → CSS height
- UX重視 → 自動伸縮（scrollHeight）
高さは見た目だけでなく、
入力体験そのものを左右します。
フォームの完成度を上げたいなら、
textareaの高さ設計は妥協しないこと。
ここを丁寧に作るだけで、
サイト全体の印象は一段上がります。