CSSのresizeを使ってみる

ユーザーが要素のリサイズを行えるようにするCSSのプロパティ「resize」を使ってみます。

対応ブラウザ

resizeの対応ブラウザはこちら
IEやEdge、iOSでは対応していないようです。

サンプルコード

resizeプロパティでよく使われるのが、textareaの制御です。
resizeプロパティの各値を試してみます。

HTML

<textarea class="both"></textarea>
<textarea class="horizontal"></textarea>
<textarea class="vertical"></textarea>
<textarea class="none"></textarea>

CSS

.both {
	resize: both;
}
.horizontal {
	resize: horizontal;
}
.vertical {
	resize: vertical;
}
.none {
	resize: none;
}

horizontalが水平方向、verticalが垂直方向へのリサイズで、bothは両方、noneはリサイズしないようになります。
textareaのリサイズのデモページ

textarea以外でも、overflowの値をvisible以外に設定している要素であれば使えるようです。

HTML

<div class="box both"></div>
<div class="box horizontal"></div>
<div class="box vertical"></div>
<div class="box none"></div>

CSS

.box {
	overflow: auto;
}
.both {
	resize: both;
}
.horizontal {
	resize: horizontal;
}
.vertical {
	resize: vertical;
}
.none {
	resize: none;
}

divのリサイズのデモページ
　

【参考サイト】

• https://developer.mozilla.org/ja/docs/Web/CSS/resize