ユーザー操作
resize
resize は、要素の角につまみを出して、見る人がドラッグで大きさを変えられるようにします。縦だけ、横だけにも絞れます。
構文
none | both | horizontal | vertical | block | inlineプレビュー
メモThe quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box > :nth-child(2) {
overflow: auto;
resize: both;
}コントロール
resizeboth
メモThe quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
解説
値の書き方
none（初期値）: つまみを出しません。both: 幅と高さの両方を変えられます。horizontal/vertical: 幅だけ / 高さだけを変えられます。block/inline: 行が積み重なる向き / 文字が並ぶ向きだけを変えられます。横書きではvertical/horizontalと同じで、縦書きでは入れ替わります。
プレビューでは、メモ（2 番目の子）に書いています。メモの右下の角をドラッグして、大きさを変えてみてください。
スクロールする箱にしか効かない
resize は、overflow が auto・scroll・hidden のどれかの要素にだけ効きます。初期値の visible や clip ではつまみが出ないので、プレビューでも補助の宣言で overflow: auto を書いています（画像や iframe には、ブラウザによっては overflow によらず効きます）。
気をつけること
textareaはブラウザの既定のスタイルで、はじめから縦横に大きさを変えられます。レイアウトを崩されたくないときはresize: verticalやresize: noneを書きます。- ドラッグすると、ブラウザが要素の
style属性にwidth・heightを px で書き込みます。広げすぎや縮めすぎを防ぐときは、max-widthやmin-heightで範囲を決めておきます。 - タッチ操作では、つまみを動かせないブラウザもあります。