CSS辞書

resize

インタラクション・UX

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

構文

Syntax
resize: none | both | horizontal | vertical

Tailwindでは

resizeresize: both
resize-yresize: vertical
resize-noneresize: none

コード例

1

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

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

2

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

横方向のみリサイズ可能

3

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

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

4

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

リサイズ不可

💡 TIPS

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

⚠️ よくある間違い

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

🤖 AIがよく間違えるポイント

resizeはoverflowがvisible以外の要素にしか効きません——この前提条件をAIは省略しがちです。またtextareaの自動サイズ調整(内容に応じて伸びる)はresizeではなくfield-sizing: contentの領域で、手動リサイズと自動リサイズの区別が必要です。方向はboth/horizontal/verticalを選べます。

💬 AIへの頼み方

チャット欄のtextareaを「手動リサイズは縦のみ許可、内容でも自動で伸びる」ようにresizeとfield-sizingで設計して

そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。

関連プロパティ

このプロパティを使ったUIレシピ

ブラウザサポート

対応が限定的
Chrome
1+
Firefox
4+
Safari
3+
Edge
79+