resize

インタラクション・UX

ユーザーが要素のサイズを変更できるかどうかを指定するプロパティです。none、both、horizontal、verticalの値があり、textareaのリサイズ動作を制御できます。

構文

Syntax
resize: none | both | horizontal | vertical

コード例

1

resize: vertical;
実行結果
右下の角をドラッグしてサイズ変更可能

縦方向のみリサイズ可能(textareaのデフォルト)

2

resize: horizontal;
実行結果
横方向のみリサイズ可能

横方向のみリサイズ可能

3

resize: both;
実行結果
縦方向のみリサイズ可能

縦横両方向にリサイズ可能

4

resize: none;
実行結果
リサイズできない

リサイズ不可

💡 TIPS

textareaのリサイズを制御する際によく使う。overflowが visible 以外である必要がある。

⚠️ よくある間違い

overflow: visible;では効果がない。overflow: auto;やhidden;などと組み合わせる。

関連プロパティ

ブラウザサポート

全ブラウザ対応