resize プロパティ

最終更新：2026-09-13

resize resize プロパティ

resize プロパティは、ユーザーがドラッグで要素のサイズを変更できるかどうか、およびどの方向に変更できるかを制御します。<textarea> などの要素でよく使用され、ユーザーが必要に応じてサイズを自由に変更でき、フォームの使い勝手を向上させます。

カテゴリ
初期値	none
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

resize: none | both | horizontal | vertical | block | inline;

⚙️ 値

値	タイプ	説明
`none \| both \| horizontal \| vertical \| block \| inline`	キーワード	ユーザーのサイズ変更の挙動

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
resize	✓ v4	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザーでサポート

ヒント： resize は overflow プロパティ（auto、scroll、hidden）と組み合わせた場合にのみ機能します。overflow の値がないと、resize は無視されます。

ヒント： horizontal は幅のみのサイズ変更を許可します。vertical は高さのみを許可します。both は両方向のサイズ変更を許可します。

❓ よくある質問

QCSS の resize プロパティはページ内のどの要素に適用できますか？

Atextarea はデフォルトでサポートしています。その他の要素は 2 つの条件を満たす必要があります。visible 以外の overflow の値（auto、hidden、scroll）と、明確または推測可能なサイズです。これらを満たせば、div、section、画像コンテナのすべてにドラッグハンドルが表示されます。インライン要素はデフォルトでは適用されません。

QCSS でユーザーが textarea 要素のサイズを変更できないようにするにはどうすればよいですか？

Aresize: none を設定すると、右下隅のドラッグハンドルが削除されます。垂直方向のみのサイズ変更を許可するには resize: vertical を、水平方向のみには resize: horizontal を使用します。製品が固定レイアウトを要求する場合や、textarea の高さが JavaScript で計算される場合、resize を無効にするのは一般的な要件です。

Qresize が機能しないのはなぜですか？また、なぜ overflow を要素に設定する必要があるのですか？

A仕様では、overflow が visible 以外の要素にのみ resize を有効にすることが求められています。そうでない場合、プロパティは無視されます。これが最も一般的な失敗の原因です。また、要素はドラッグ時に実際にサイズを変更できる必要があります。display: inline の要素やサイズ制約のない要素では機能しません。順にデバッグしてください。overflow、次に要素の種類、そしてスクロール可能なコンテナかどうかです。

Qresize で要素の最小・最大サイズを制限できますか？

Aはい。resize はサイズ変更ができるかどうかを制御し、min-width、max-width、min-height、max-height はサイズ変更の範囲を制御します。両者は組み合わせて機能します。例えば、resize: both; max-width: 400px; min-width: 200px; とすると、要素は 200px から 400px の間でしかドラッグできません。