CSS3スタイル虎の巻

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

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

備考

  • リサイズ可にした場合、Chromeだと要素の右下に斜線が表示されます。
  • 2019年11月現在、Edgeは非対応です。