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

resize (CSS property)

resize は CSS のプロパティで、要素の寸法を変更できるかどうか、もしそうなら、どの方向に変更できるかを設定します。

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

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
resize
1
79
4
3
18
block
118
118
63
16
118
block level support

ブロック レベル、置換、テーブル セル、またはインライン ブロック要素のサポート
4
79
5
4
18
inline
118
118
63
16
118
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • プロパティは認識されますが、効果はありません。 バグ 211994 を参照してください。
注釈 1件
実装メモ
  • `resize` は `<iframe>` には影響しません。 バグ 680823 を参照)

基本構文

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

ライブデモ

vertical

CSS Vertical demo.

プレビュー全画面表示

horizontal

CSS Horizontal demo.

プレビュー全画面表示

both

CSS Both demo.

プレビュー全画面表示

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク