今回は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は幅や高さを固定しておかないとユーザーが勝手に操作してデザインが崩れてしまう可能性があります。
必要に応じて拡大を禁止してデザインが崩れないようにできるといいですね。
