textarea要素とは、複数行のテキストを入力するエリアを作成するHTMLタグのことです。例えば、コメント欄ですね。
Firefox 4.0以降、Safari 3.0以降、Google Chrome 1.0以降では、そのテキストエリアをリサイズすることができます。Internet ExplorerやOperaではリサイズに対応していません。
下の画像のように右下にあるマークをドラッグすることによってテキストエリアのサイズを変更することができます。
Firefox
Safari、Google Chrome
でも、このリサイズの機能であるresizeプロパティは、なぜかデフォルトでリサイズができる状態になっていて、制御しないとデザインやレイアウトの崩れが起きます。
もしそれを避けたいのであれば、CSSでテキストエリアのリサイズを制御することができます。
＜リサイズを無効にする＞
textarea {
resize: none;
}
＜幅のリサイズだけを可能にする＞
textarea {
resize: horizontal;
}
＜高さのリサイズだけを可能にする＞
textarea {
resize: vertical;
}
Twitterではこの高さのリサイズだけを可能にするようにCSSで制御していますね。
他だとFacebookではリサイズを無効にするようにしています。
個人的に自由にリサイズされるのが嫌だったので、このブログでもコメント欄のリサイズを制御してます。
