HTMLのtextareaの高さや幅を固定して拡大を禁止する方法

HTMLのtextareaの高さや幅を固定して拡大を禁止する方法 CSS

今回はHTMLでユーザーがtextareaの幅や高さを拡大するのを禁止して、固定する方法を解説します。

 

スポンサーリンク

textareaの幅も高さも固定する方法

CSSで以下の1行入れるだけです。

textarea {
  resize: none;
}

resizeはその名の通りtextareaのリサイズを制御するプロパティです。

たったこれだけでtextareaの幅も高さも両方固定されるので、ユーザーが勝手に拡大してレイアウトが崩れるといったことを防げるようになります。

 

実際にやってみるとこんな感じです。幅も高さも固定されていて拡大できないのがわかると思います。

See the Pen
gOwbwwL
by wagashi000327 (@wagashi000327)
on CodePen.

 

textareaの横幅のみ固定する

横幅のみ固定して高さは自由に変えられるようにしたい場合はresize:  vertical;と指定します。

textarea {
  resize: vertical;
}

 

こんな感じになります。横幅が固定され高さだけが変更できるようになりました。

See the Pen
XWjJjMO
by wagashi000327 (@wagashi000327)
on CodePen.

 

textareaの高さのみ固定する

逆に高さのみ固定して横幅を自由に広げられるようにしたい場合はresize: horizontal;を指定します。

textarea {
  resize: horizontal;
}

 

こんな感じになります。今度は高さが固定され横幅だけ変更できるのがわかると思います。

See the Pen
qBaEaqe
by wagashi000327 (@wagashi000327)
on CodePen.

 

resizeプロパティの初期値

ちなみにresizeプロパティはresize: both;が初期値です。幅も高さも自由に変更できる状態ですね。

textarea {
  resize: both;
}

 

幅も高さもユーザーが変更できる状態ですね。

See the Pen
XWjJjpO
by wagashi000327 (@wagashi000327)
on CodePen.

 

まとめ

textareaは幅や高さを固定しておかないとユーザーが勝手に操作してデザインが崩れてしまう可能性があります。

必要に応じて拡大を禁止してデザインが崩れないようにできるといいですね。