たいていのブラウザで、テキストエリアのサイズはユーザーが自由に変更できるようになっています。
ユーザーにとっては便利な機能ですが、テキストエリアのサイズを自由に変更されすぎるとレイアウトが崩れる原因になります。
対策として、テキストエリアのサイズ変更にCSSで制限をかけることで解決します。
主に使用する制限は以下の2つです。
- サイズ変更不可
- 縦幅のみサイズ変更可能
1. サイズ変更不可
ユーザーがテキストエリアのサイズを一切変更できなくします。
あらかじめ、必要な大きさを確保しておけば変更できなくても問題ないかと思います。
スクロールバーは必要に応じて追加されるので安心ですね。
|
1 2 3 |
.class1 { resize:none; } |
2. 縦幅のみサイズ変更可能
レイアウト的に縦幅が変更されても問題がない場合は、縦幅のみ変更できるようにすると良いかと思います。
以下のCSSで実現可能です。
|
1 2 3 |
.class2 { resize: vertical; } |
レイアウト崩れもUIも気にする必要がありますね。
サンプルも作りました。
