resizeプロパティの説明
CSSのresizeプロパティは、ユーザーが要素のサイズを変更できるかどうかを指定します。要素は幅と高さの寸法を持つボックスを生成しますが、そのどちらか一方あるいは両方のサイズを可変式にするか固定するかを制御できます。
リサイズを有効にできるのはブロック要素です。インライン要素は可変式にできません。また、overflowの値がvisibleであるブロック要素にも適用できません。
初めからリサイズを受け付ける<textarea>などの寸法を固定する場合にも有効です。主要なブラウザで可変式になっている要素に対してresizeを指定すると、その動作を上書きすることができます。
resizeに指定できる値
none- 要素はユーザーの操作でサイズ変更することを受け入れません。これが初期値です。
both- 要素はユーザーの操作によってサイズ変更できる仕組みを、水平方向と垂直方向どちらも提供します。主要なブラウザでは、ボックスの右下にハンドルが表示されてドラッグやスワイプを受け付けることを示します。
horizontal- 要素はユーザーの操作によってサイズ変更できる仕組みを、水平方向にのみ提供します。主要なブラウザでは、ボックスの右下にハンドルが表示されてドラッグやスワイプを受け付けることを示します。
vertical- 要素はユーザーの操作によってサイズ変更できる仕組みを、垂直方向にのみ提供します。主要なブラウザでは、ボックスの右下にハンドルが表示されてドラッグやスワイプを受け付けることを示します。
resizeの使い方とサンプルコード
resizeプロパティの構文は以下の通りです。
/* キーワード値 */
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に対応しているブラウザであれば、コンテナの右下にハンドルが表示されます。それを掴んで寸法を伸縮させてみて下さい。
<div class="resize_box">
<div>
<h2>リサイズ可能なボックスの見出し</h2>
<p>ブロック要素のテキスト。ブロック要素のテキスト。</p>
<span>インライン要素のテキスト。インライン要素のテキスト。</span>
<p>ブロック要素のテキスト。ブロック要素のテキスト。</p>
<span>インライン要素のテキスト。インライン要素のテキスト。</span>
</div>
</div>
.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;
}
テキストエリアのリサイズ機能を無効にする
入力・送信フォームなどを設置する祭に、<textarea>を使用すると主要なブラウザでは既定値でサイズの変更が可能となっています。この動作をresizeは上書きできます。
例えば、長い文章を求めるテキストエリアを置いた時、ユーザーの利便性を考慮しつつレイアウトを保護したいケースがあるとします。当然、縦横すべてのリサイズを無効にしてしまうこともできますが、そのどちらか一方を制限することも可能です。
<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>
.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;
}