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

テクノロジー

2021.03.13 2021.01.21

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

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

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

想定読者
・<textarea>タグのサイズを固定したい方
・HTML/CSSを勉強中の方
・具体的なソースコードを知りたい方

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

おさかな

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

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

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

↓リファレンス

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

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

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

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

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

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

おさかな

文章が書けちゃう、新種のおさかなです。元不登校。紆余曲折あり、現在はフリーライターとして活動中。化粧品検定2級。IT、サブカルチャー、ファッション、コスメ、グルメ、シナリオまで色々書きます。SAOのユウキが好きです！