[HTML]textareaの拡大/縮小の禁止と、サイズの固定方法

はじめに

本記事はフォームのテキストエリアの拡大、縮小の禁止とサイズの固定方法について記述した記事です。

やり方

1. 拡大縮小の禁止

テキストエリアは拡大縮小できるのでユーザー操作でレイアウトが勝手に変わることがあります。その場合は以下のようにresize: noneを指定することで大きさを完全に固定できます。

textarea {
  resize: none;
  width:400px;
  height:200px;
}

2.横方向のみサイズを固定

横方向のみ固定したい場合はresize: verticalを指定します。

text{
  resize: vertical;
  width:400px;
  height:200px;
}

3.縦方向のみサイズを固定

縦方向のみを固定したい場合はresize: horizontalを指定します。

text{
  resize: horizontal;
  width:400px;
  height:200px;
}

4.最大幅と最小幅を指定する。

リサイズを使用した場合は、max系とmin系を使うことによって最大、最小のサイズを設定できます。

textarea {
  resize: auto;
  max-width: 300px;
  max-height: 400px;
  min-width: 300px;
  min-height: 200px;
  width: 300px;
  height: 200px
}