CSS: resize: 要素の大きさを手動操作で変更する

概略

CSS の resize で div タグなどの大きさを手動操作で変更できます。

• MDN: resize

textarea タグのリサイズ

textarea タグでは初期表示で領域の大きさをドラッグ操作で変更できます。 textarea の右下にドラッグ操作に反応する領域があります。
textarea タグ

textarea のサイズ変更を禁止したい場合は CSS で resize: none; を設定します。

textarea {
	resize: none;
}

div タグ、figure タグなどのリサイズ

div タグや figure タグなどのブロック要素 (display: block; の要素) は resize を設定することでドラッグ操作でサイズを変更できます。

resize: (下のどれかを指定);
  both       : 水平方向と垂直方向のどちらもサイズを変更できるようにします。
  horizontal : 水平方向だけサイズを変更できます。
  vertical   : 垂直方向だけサイズを変更できます。

このとき overflow の設定も必要です。 div などのタグは overflow の初期値が visible になっていますが、 visible の場合はサイズ変更できません。 auto や scroll など設定します。

.div1 {
	resize: both;        /* div の大きさを変更可能にする。 */
	overflow: auto;      /* これも必要。visible の場合はリサイズできません。 */
	...
}

img タグのリサイズ

img タグ (display: inline-block;) は resize で変更できないので、figure タグや div タグの中に img タグを格納して、figure や div に resize を設定します。

iframe タグのリサイズ

resize: both; だけでリサイズできます。

table タグのリサイズ

Chrome や Edge では table の th などの要素も CSS の resize の設定でドラッグ操作で領域の大きさを変更することができます ただし、Firefox119 (2023) では対応していません。

JavaScript で要素の大きさを変更する

複雑な処理の必要な Web アプリケーションでは JavaScript のマウスイベントを使って要素の大きさを変える話もあります。

昔の Web ブラウザには CSS resize がなかったので JavaScript で処理していました。 現在では CSS で間に合う話は JavaScript を使わず CSS で済ませた方が簡単です。

関連

• CSS: 要素の大きさを画面に合わせて変更する
• CSS: 要素の大きさの指定
• CSS display: inline, block など
• JavaScript: マウスイベント処理