【CSS】テキストエリアのリサイズを無効にする

フォームなどで使用されるテキストエリアは、ブラウザによってはボックスのサイズを自由に変更することができる機能が備わっています。CSSを使ってこのリサイズ機能を禁止する方法を紹介します。

リサイズの制御方法

テキストエリアのサイズを変更させたくないといった場合には、resizeプロパティを使って制御することができます。

textarea {
  resize: none;
}

resizeプロパティの値を「none」にすることによって下図にあるようなリサイズ機能を無効にすることができます。

ユーザーがそれぞれ好きな大きさに変えてテキストを入力しやすいようにカスタマイズできることは良いことですが、テキストエリアをリサイズすることによってレイアウトが崩れる場合もあります。そのような表示崩れが気になるときはCSSを使ってテキストエリアのリサイズを制御することも1つの方法になります。

以上が、CSSを使ってテキストエリアのリサイズを無効にする方法となります。