マウスドラッグでtextareaの高さや横幅の
リサイズを一部を制御したり禁止する方法【CSS】

資料請求系にはあまり使わないかもしれませんが、お問い合わせフォーム系など何かしら内容を書いてもらう際には、必ずと言って良いほどにtextareaが用いられます。

普段そこまで気にする方も多くないとは思うのですが、このtextareaはそのまま使うと、どれだけサイズを指定したとしても、右下のサイズ変更用のボタンをドラッグすることで、ユーザー側が自由にtextareaのサイズをリサイズすることができます。

今回は、そんなtextareaのリサイズをCSSで制御したり禁止する方法について見ていきたいと思います。

textareaのリサイズについて

まずはリサイズについて見ておきましょう。
下記が、実際のtextareaのサンプルになりますが、右下につまむボタンが付いているかと思いますので、それをドラッグしてみてください。

ドラッグすることで、自由にサイズを変更できてしまいます。
これが特にどうこうという事はないのですが、これをできれば禁止したいという要望がたまにあったりしますので、その対処法を知っておきましょう。

textareaのリサイズは、resizeプロパティで設定

textareaがリサイズできるのは、resizeプロパティによって設定されています。
そのため、このresizeプロパティを変更することで、制御したり禁止したりすることができるのです。

resizeプロパティの設定について

では、実際にresizeプロパティについてみていきましょう。
デフォルトのtextareaでは、右下のつまみをドラッグすると、縦にも横にも自由にサイズを変更することができます。

これは、resizeがbothという値がデフォルトでは設定されているからで、この値を変えることで自由に設定が可能です

縦のみ許可、横を禁止するならvertical

textareaをドラッグでサイズ変更する際、入力内容に応じて、高さだけは自由にドラッグで変更させても良いけれど、横のサイズは変更させたくない。という場合は、verticalという値を設定します。

textarea{
  resize: vertical;
}

最初の例と比べると、つまみにマウスカーソルを合わせた時に、最初は斜めのカーソルで縦横変更が可能というカーソルですが、verticalの設定後は、上下の矢印に変更になっているのが確認出来ます。

横のみ許可、縦を禁止するならhorizontal

一方、縦ではなく横のみ変更を許可したいという場合は、horizontalを設定します。
これを設定すれば、ドラッグすると縦は禁止され横のみリサイズが可能になります。

textarea{
  resize: horizontal;
}

こちらも先の2例と比べると、右下のつまみにカーソルを合わせた時には、左右の矢印に変わっており、横にしかリサイズできないようになっているのが確認できます。

max-widthやmax-heightと合わせて設定も可能

縦や横を制御した場合、max-widthやmin-width、さらにはmax-heightやmin-heigthを設定することで、その幅・高さまでは自由に変更することができ、その幅や高さのサイズ以上は広げたり縮めたりすることはできないという設定も可能です。

textarea{
  width: 500px;
  max-width: 600px;
  min-width: 400px;
  height: 300px;
  max-height: 400px;
  min-height: 200px;
  resize: both;
}

このように、最大値・最小値と合わせればその範囲内でのリサイズ変更が可能になります。

縦横どちらのリサイズも禁止するならnone

では最後に全てを禁止する方法を見ておきましょう。
縦にも横にもリサイズを禁止するのであれば、noneを指定することでリサイズが一切不可という設定になります。

textarea{
  resize: none;
}

こうすることで上記の例のように、リサイズが不可になってしまいます。
そのため、この場合は、必ず横幅・高さはある程度の設定をしておく必要があります。

極端な話、横幅が100px、高さが100pxでリサイズ不可などの設定をしてしまうと、書いている内容が確認しにくくなり、さらにはリサイズもできないとなり、使い勝手が非常に悪くなってしまいます。

resize: none;を設定する場合は、ある程度の横幅、高さを合わせて設定するようにしましょう。

まとめ

textareaのリサイズを制御したり禁止する方法についてまとめてみました。
実際にこれを制作現場で必要となる機会はそう多くはないかもしれませんが、クライアントに依頼されたときに知っておかないといけないので、設定ができるようにはなっておくようにしましょう。

ただ自分も過去の経験上、resize: none;を設定したことはありますが、縦だけ制御、横だけ制御というのはあまり経験はないのでそこまで使う頻度が高いものではありません。

むしろ別記事でも解説しました、テキストエリアの高さを、入力内容が長くなったらその長さに応じて高さを自動でリサイズしてくれる設定の方が現場では好まれるかなと思うので、そちらも合わせて確認しておいていただければと思います。