Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。
構文・カスケード Limited support

resize (CSS property)

resizeプロパティは、ユーザーによる要素のリサイズ操作を制御します。both、horizontal、vertical、noneの値を指定でき、overflowがvisible以外の要素に対して有効です。テキストエリアのリサイズ制御や、分割パネルの境界調整など、ユーザーインタラクションを柔軟に設計できます。

インタラクションリサイズ

概要

resizeプロパティは、ユーザーによる要素のリサイズ操作を制御します。both、horizontal、vertical、noneの値を指定でき、overflowがvisible以外の要素に対して有効です。テキストエリアのリサイズ制御や、分割パネルの境界調整など、ユーザーインタラクションを柔軟に設計できます。

対応ブラウザ

デスクトップ

Chrome 4+
Edge 79+
Safari 4+
Firefox 5+

モバイル

Chrome Android 18+
Safari iOS 未対応
Firefox Android 未対応

基本構文

CSS 
textarea {
  resize: vertical;
}
.panel {
  resize: horizontal;
  overflow: auto;
}

実務での使いどころ

  • テキストエリアのリサイズ方向制限

    テキストエリアを垂直方向のみリサイズ可能に設定し、レイアウトの崩れを防ぎます。

注意点

  • resizeを機能させるには、overflowがvisible以外（auto、scroll、hiddenなど）に設定されている必要があります。

アクセシビリティ

  • resize: noneを<textarea>に設定すると、ユーザーが入力域を広げられなくなるため、十分なデフォルトサイズを確保してください。

参考リンク