CSS

A property that lets users resize elements by dragging.

resize

resizeとは？

CSSのresizeプロパティは、要素のサイズ（幅や高さ）をマウス操作で変更できるようにするためのプロパティです。主に<textarea>や、CSSでoverflowが設定されている要素に使われます。

基本的な使い方

textarea {
	resize: both;
}

このように設定すると、テキストエリアの右下にドラッグ用のハンドルが表示され、ユーザーが自由にサイズを変更できるようになります。

主な値

none

サイズ変更を禁止する

both

幅と高さの両方を変更可能（デフォルト）

horizontal

横方向のみ変更可能

vertical

縦方向のみ変更可能

block（非標準）

ブロック軸方向のみ（主に縦方向）※一部ブラウザ限定

inline（非標準）

インライン軸方向のみ（主に横方向）※一部ブラウザ限定

resizeはoverflowがvisible以外になっていないと効きません。通常はoverflow: autoやscrollとセットで使います。

応用例

div.resizable-box {
	width: 200px;
	height: 100px;
	resize: both;
	overflow: auto;
	border: 1px solid #ccc;
}

このようにdiv要素にも設定でき、入力エリア以外でもインタラクティブなUIを提供できます。