textareaをサイズ固定にする方法を解説！リサイズを禁止する

textareaをリサイズできる機能は便利だが、時にはサイズを固定しておきたいと思うことがあります。例えばユーザーがtextareaのリサイズをすると全体のデザインが崩れてしまうような場合です。

textareaのサイズを固定する方法はとても簡単です。
その方法を紹介していきます。

まずシンプルに幅、高さともにリサイズが効かないようにする方法について紹介します。

その方法とはCSSでtextareaの要素にresize:none;を追加するだけです。

それではサンプルコードを用いて、実際の挙動を見てみましょう。

このようにtextareaのリサイズが効かないです。

水平方向、もしくは垂直方向にのみリサイズしたくないということがあると思います。
その方法を今回は紹介します。

ではまず水平方向のリサイズを禁止にする方法を見ていきましょう。

水平方向のリサイズを禁止にする、つまりは垂直方向のサイズのみ可変とすればいいわけです。
その方法とはCSSにresize:vertical;を設定するです。

verticalとは垂直という意味で、すなわち垂直方向のみリサイズ可能ということです。

では実際にサンプルコードを用いてその挙動を見てみましょう。

このように垂直方向にしかリサイズできません。

では同じ考え方で水平方向のみサイズを可変とする方法を見てみましょう。

その方法とはCSSにresize:horizontal;と設定するです。

では実際にサンプルコードを用いて挙動を見てみましょう。

 

このように水平方向にしかリサイズできないことが分かります。

最大値、最小値を設定しておくと、これ以上は小さくならない、またこれ以上は大きくならないというような設定が可能となります。

ではその方法を紹介します。

それはCSSでmin-width、max-width、min-height、max-heightを設定することで実現できます。

では実際にサンプルコードを用いて挙動を見てみましょう。

リサイズしていただくと、このようにある値以上は大きくならない、もしくは小さくならないというように設定することができます。

そして上のサンプルではテキストボックスの内容によって自動的に高さが調整されるようになっています。

これについて詳しく知りたい方は別記事で載せていますので、ぜひ下のリンクから見てみてください。

いかがでしたでしょうか？

textareaをサイズ固定することで、ユーザの操作や文章量によって、エリアの大きさが勝手に変わってしまい、予期せぬレイアウト乱れが発生してしまったりするのを防ぐことができます。

万全なフォームを実装するためにぜひ使ってみてください。