resize:ユーザーが要素のサイズを変更できるかどうかを指定する

初期値 none
適用対象 overflowの値がvisible以外の要素、画像、動画、<iframe>を表す置換要素
継承 しない
アニメーション 離散値
対応ブラウザ caniuseで確認

resizeプロパティの説明

resizeは、ユーザーが要素のサイズを変更できるかどうかを指定します。要素は幅と高さの寸法を持つボックスを生成しますが、そのどちらか一方あるいは両方のサイズを可変式にするか固定するかを制御できます。

リサイズを有効にできるのはブロック要素です。インライン要素は可変式にできません。また、overflowの値がvisibleであるブロック要素にも適用できません。

初めからリサイズを受け付ける<textarea>などの寸法を固定する場合にも有効です。主要なブラウザで可変式になっている要素に対してresizeを指定すると、その動作を上書きすることができます。

resizeに指定できる値

none
要素はユーザーの操作でサイズ変更することを受け入れません。これが初期値です。
both
要素はユーザーの操作によってサイズ変更できる仕組みを、水平方向と垂直方向どちらも提供します。主要なブラウザでは、ボックスの右下にハンドルが表示されてドラッグやスワイプを受け付けることを示します。
horizontal
要素はユーザーの操作によってサイズ変更できる仕組みを、水平方向にのみ提供します。主要なブラウザでは、ボックスの右下にハンドルが表示されてドラッグやスワイプを受け付けることを示します。
vertical
要素はユーザーの操作によってサイズ変更できる仕組みを、垂直方向にのみ提供します。主要なブラウザでは、ボックスの右下にハンドルが表示されてドラッグやスワイプを受け付けることを示します。

resizeの使い方とサンプル

resizeプロパティの構文は以下の通りです。

CSS
/* キーワード値 */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;

/* 実験的な値 */
resize: block;
resize: inline;

/* グローバル値 */
resize: inherit;
resize: initial;
resize: revert;
resize: unset;

resizeの実例

それでは実際にresizeプロパティの書き方を見ていきましょう。以下の例では、凡庸な<div>要素をリサイズ可能な状態にしています。通常ではユーザーの操作を受け付けないボックスであっても、CSSで簡単に機能を実装できるようになっています。

resizeに対応しているブラウザであれば、コンテナの右下にハンドルが表示されます。それを掴んで寸法を伸縮させてみて下さい。

表示確認
CSS
.resize_box {
	overflow: auto;
	margin: 1rem;
	padding: 1rem;
	background: #eee;
	resize: both;
}
.resize_box > div {
	padding: 1rem;
	border: 1px solid #333;
	background: #fff;
}
.resize_box h2 {
	border-bottom: 1px solid ;
	font-size: 1rem;
}
.resize_box p {
	margin: 1rem 0 0;
	border: 1px solid #fc9;
	background: #fea;
}
.resize_box span {
	border: 1px solid #9cf;
	background: #aef;
}
HTML
<div class="resize_box">
	<div>
		<h2>リサイズ可能なボックスの見出し</h2>
		<p>ブロック要素のテキスト。ブロック要素のテキスト。</p>
		<span>インライン要素のテキスト。インライン要素のテキスト。</span>
		<p>ブロック要素のテキスト。ブロック要素のテキスト。</p>
		<span>インライン要素のテキスト。インライン要素のテキスト。</span>
	</div>
</div>

テキストエリアのリサイズ機能を無効にする

入力・送信フォームなどを設置する祭に、<textarea>を使用すると主要なブラウザでは既定値でサイズの変更が可能となっています。この動作をresizeは上書きできます。

例えば、長い文章を求めるテキストエリアを置いた時、ユーザーの利便性を考慮しつつレイアウトを保護したいケースがあるとします。当然、縦横すべてのリサイズを無効にしてしまうこともできますが、そのどちらか一方を制限することも可能です。

表示確認
CSS
.samp_box {
	overflow: auto;
	margin-top: 1rem;
	padding: 1rem;
	background: #eee;
}
.samp_box > h2 {
	margin: 0 0 .5rem 0;
	font-size: 1rem;
}
#ta_1 {
	resize: horizontal;
}
#ta_2 {
	resize: vertical;
}
#ta_3 {
	resize: none;
}
HTML
<div class="samp_box">
	<h2>resize: horizontal;</h2>
	<textarea id="ta_1">水平方向の伸縮を許可します</textarea>
</div>

<div class="samp_box">
	<h2>resize: vertical;</h2>
	<textarea id="ta_2">垂直方向の伸縮を許可します</textarea>
</div>

<div class="samp_box">
	<h2>resize: none;</h2>
	<textarea id="ta_3">伸縮を許可しません</textarea>
</div>

resizeに関連するCSSプロパティ

要素の幅や高さ
box-sizing 要素の幅と高さをどのように計算するかを指定する
height 要素の高さを指定する
width 要素の幅を指定する
max-height 要素の高さの最大値を指定する
max-width 要素の幅の最大値を指定する
min-height 要素の高さの最小値を指定する
min-width 要素の幅の最小値を指定する
resize ユーザーが要素のサイズを変更できるかどうかを指定する