こんにちは。エキサイトでデザイナーをしている齋藤です。
今回は、textarea要素のサイズ変更を提供する方向を制御する方法をご紹介します。
実現したいこと
冒頭、実現したいことを整理します。
texarea要素は、要素右下のつまみをドラッグすることでサイズ変更が可能です。
CodePenを用意しましたので体験してみてください。
See the Pen サイズ変更が可能なtextarea要素 by AyumuSaito (@ayumusaito-excite) on CodePen.
ブラウザやリセットCSSによりますが、デフォルトでは水平方向・垂直方向の両方でサイズ変更が提供されていることが多いです。
一方で今回実現したいのは、サイズ変更を提供する方向を水平方向か垂直方向かを限定することです。
CSSプロパティのresizeで制御が可能
textarea要素のサイズ変更を提供する方向を制御する方法の一つとして、CSSプロパティのresizeがあります。
| 値 | 内容 |
|---|---|
none |
サイズ変更を提供しない（デフォルト値） |
both |
水平方向・垂直方向の両方でサイズ変更を提供する |
horizontal |
水平方向のサイズ変更を提供する |
vertical |
垂直方向のサイズ変更を提供する |
この他に、blockとinlineがありますが割愛します。
例えば、サイズ変更を垂直方向に限定したい場合はresize: vertical;を指定します。
See the Pen 垂直方向のみサイズ変更が可能なtextarea要素 by AyumuSaito (@ayumusaito-excite) on CodePen.
textarea { resize: vertical; }
注意点
resizeプロパティはCSS Basic User Interface Module Level 3に含まれ、同仕様はW3Cにより2018年6月に勧告されていますが、2025年5月12日現在、iOS版Safariでサポートされていません。
Tailwind CSSの場合
Tailwind CSSでresizeプロパティを指定する場合は、resize-*ユーティリティクラスを使用します。
| ユーティリティクラス | 内容 |
|---|---|
resize-none |
resize: none; |
resize |
resize: both; |
resize-x |
resize: horizontal; |
resize-y |
resize: vertical; |
まとめ
今回は、textarea要素のサイズ変更を提供する方向を制御する方法としてCSSのresizeプロパティをご紹介しました。
textarea要素のサイズ変更を制限することで意図しないレイアウト崩れを防ぎたいといった場合に有用です。
スタイリングする際の一助となれば幸いです。ご精読ありがとうございました。
