【HTML/CSS】「textarea」のサイズを「固定」する方法をわかりやすく解説！【画像付き】

みなさんこんにちは！おさかなです！

今回は「<textarea>のサイズを「固定」する方法」について、書いていこうと思います！

それでは、レッツゴー！！！！！

テキストエリアが可変のまま！

おさかな

<textarea>タグを使うと、サイズが大きくなったり小さくなったりしてしまう…。なんとかしたい！

今回はこんな場合の解決方法を「CSS」でご紹介します！

<textarea>のサイズを固定しよう！

サイズを固定する場合は、CSSのresizeプロパティというものを利用します！(おー！)
サイトを訪問した人に、サイズ変更を許可するかしないかを指定することが出来るみたいです。

↓リファレンス

resize－CSS3リファレンス

CSS3のプロパティ解説

www.htmq.com

今回はサイズを固定したいので「resize: none;」として、「width」と「height」をそれぞれpxで指定してあげます！(ドキドキ…。)

↓横300px, 縦200pxで固定したい場合

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

コードの結果がコチラ！
きちんとサイズが固定されて、デザイン崩れを防ぐことができました。(いえい！)

サイトを作る時に、お問い合わせフォームの内容欄にも応用できそうなコードなので、今後もたくさん活用していきたいと思います！🍵
みなさんもぜひ参考にしてみてください！

ここまで読んでくださり、ありがとうございました！

おさかな

文章が書けちゃう、新種のおさかなです。

元不登校。紆余曲折あり、現在はライターとして活動中。IT技術、サブカルチャーから、シナリオまで色々書きます。
SAOのユウキが好きです！

おさかなをフォローする