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

Technology
スポンサーリンク

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

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

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

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

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

おさかな
おさかな

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

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

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

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

↓リファレンス

resize-CSS3リファレンス
CSS3のプロパティ解説

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


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

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

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

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

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

おさかな

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

元不登校。引っ越し以外の理由で3回も転校したのに、結局中卒。
現在はマイペースに「プログラム」書いたり、「作曲」したり「文章」書いたり色々してます。
SAOのユウキが好きです!

おさかなをフォローする

この記事は役に立ちましたか?

タイトルとURLをコピーしました