今ではmozillaやwebkitブラウザでは、
Webページ上に＜textarea＞タグを使ったテキストエリアを配置した際、
ユーザーがエリアのサイズを自由にリサイズすることが可能になります。
場合によっては、このリサイズ操作をすることで
周りのレイアウトが崩れてしまったり、枠からテキストエリアが飛び出してしまったり、
何かと厄介になることもあります。
そんなテキストエリアのリサイズを
CSSで制御できるプロパティがあるようなのでご紹介。
リサイズの制御は
———————————————————————————————-
・縦横自由にリサイズ（デフォルト）
・縦のみリサイズ可能
・横のみリサイズ可能
・縦横ともにリサイズ不可（テキストエリアをリサイズさせない）
・リサイズの最小値／最大値を設定
———————————————————————————————-
となります。
CSSの記述方法は以下のように。
縦横自由にリサイズ（デフォルト）
textarea {
resize: both;
}
縦のみリサイズ可能
textarea {
resize: vertical;
}
横のみリサイズ可能
textarea {
resize: horizontal;
}
縦横ともにリサイズ不可（テキストエリアをリサイズさせない）
textarea {
resize: none;
}
リサイズの最小値／最大値を設定
textarea {
min-width: 100px;
min-height: 80px;
max-width: 400px;
max-height: 200px;
}
これらの指定を加えることで、
テキストエリアのリサイズに対しての制御ができるようになります。
実際に表示は以下のようになります。
（mozilla、webkitブラウザのみ動作）
TEXTAREA RESIZE
基本的にはリサイズさせない「resize: none;」を
テキストエリアに対して指定しておくことが
レイアウトの崩れを起こさない為にも理想かと思います。
ご参考までに。。。
【参考記事】
≫Safari 3 で textarea のリサイズを制御する方法 « Apple + iPod « Forest.Kの徒然日記