【CSS】textareaのリサイズを禁止する方法

お問い合わせフォームなどで、textareaタグを利用する場合、CSSでtextareaに何も設定をしていなければ、右下のつまみを操作することで、簡単にリサイズすることができます。

とても便利な機能ですが、リサイズをすることでフォームのデザインが崩れてしまうケースもあります。
今回はリサイズを禁止するCSSプロパティをご紹介します。

サンプル

まずはテキストエリアのサンプルを動かしてみてください。
通常のテキストエリアや、幅と高さのリサイズ禁止したものがあります。

いかがでしょうか。
CSSのresizeプロパティを使うことで、textareaのリサイズを操作することができます。

幅と高さのリサイズ禁止

textarea{
  resize: none;
}

幅と高さのリサイズ禁止する場合は、resizeプロパティにnoneを指定します。

幅のリサイズ禁止

textarea{
  resize: vertical;
}

幅のリサイズ禁止する場合は、resizeプロパティにverticalを指定します。

高さのリサイズ禁止

textarea{
  resize: horizontal;
}

高さのリサイズ禁止する場合は、resizeプロパティにhorizontalを指定します。

まとめ

いかがだったでしょうか。
もともと備え付けられている便利な機能ですが、必要ない時に参考にしてみてください。