resize

resizeは、要素のサイズ変更可否を指定するスタイルです。

解説

resizeを指定すると、要素サイズの変更可否を指定できます。
変更可とした場合、要素サイズをマウスドラッグで変更できるようになります。

resizeを指定する時は、overflowの指定が必須です。（値はvisible以外）

構文は以下になります。

resize:値

resizeには以下の値が指定できます。

値	説明
none	要素をリサイズしない（初期値）（例）resize:none;
both	要素を縦横ともリサイズ可能にする（例）resize:both;
horizontal	要素を横方向のみリサイズ可能にする（例）resize:horizontal;
vertical	要素を縦方向のみリサイズ可能にする（例）resize:vertical;
inherit	親要素のリサイズの指定を継承する（例）resize:inherit;


.sample01{
  resize:both;
  overflow:auto;
}


<div class="sample01">resize:both</div>

resize:both

右下をドラッグすると、縦横方向にリサイズできます。


.sample02{
  resize:horizontal;
  overflow:auto;
}


<div class="sample02">resize:horizontal</div>

resize:horizontal

右下をドラッグすると、横方向にのみリサイズできます。


.sample03{
  resize:vertical;
  overflow:auto;
}


<div class="sample03">resize:vertical</div>

resize:vertical

右下をドラッグすると、縦方向にのみリサイズできます。