フォームでtextareaのリサイズ機能を制限する方法

仙台・宮城のWEB担当者の方、こんにちは！
今回はcssでtextareaのリサイズを制限する方法について解説します。

ChromeやFirefoxでは、textareaの大きさをユーザ側で自由に設定（右下の角をドラッグ）できるようになっています。

リサイズすることによって、レイアウトが大きく崩れたりすることもあります。崩れるといっても、そのユーザーだけに起こることなので、そんなに気にすることもないと思いますが、やはり作っている側としては気になってしまいますよね。

resizeプロパティで制限

そんな時は、resizeというプロパティを使うことによって制限することができます。

横のみリサイズ可

resizeにhorizontalを指定することによって、横方向のみリサイズ可にすることができます。

textarea {
  resize: horizontal;
}

縦のみリサイズ可

縦方向のみリサイズ可にしたい場合は、resizeにverticalを指定します。

textarea {
  resize: vertical;
}

縦横ともにリサイズ不可

縦横両方をリサイズ「不可」にしたい場合は、resizeにnoneを指定します。

textarea {
  resize: none;
}

最小値と最大値を指定

縦と横の最小値、最大値をしていすることで、リサイズを制限することもできます。

textarea {
  min-width: 250px;
  max-width: 500px;
  min-height: 100px;
  max-height: 300px;
}

まとめ

いろんなサイトを作っていると、上司やお客様からこういった細かい指示が来ることがあります。
「気にすることはない」と一蹴することもできますが、こういった指示にも丁寧に応えることがプロですよね！

それではまた！仙台・宮城でのホームページ制作やサイトリニューアルならダテナまで！