【CSS】ボックスのサイズをドラッグで自由に変更する

divなどのタグで囲まれたボックスのサイズを手動で変更したときは、「resize:both」を使います。

Can I useによると、主要ブラウザは軒並み対応してますね。
ただ、スマートフォンのブラウザはまだ怪しい感じです。

基本的な使い方

ボックスの右下に斜めの線が表示されていると思うので、ドラッグすると好きなサイズに調整できます。

resizeと一緒にoverflow: hidden;を使わないと斜め線が出てこないので注意が必要です。

See the Pen BqPLRe by ooe (@oe526) on CodePen.

上の例ではresize: both;としていますが、これは幅と高さ両方を自由に変更可能にするという指定です。
他の指定は以下に記述しておきます。

• none
  リサイズ機能をなくす
• both
  幅、高さともにリサイズできる
• horizontal
  幅のみリサイズできる
• vertical
  高さのみリサイズできる
• inherit
  親要素の値を継承

応用編

業務中、videoタグで埋めた動画のサイズを手動で変更したという依頼がきたことがありました。

videoタグに直接resize: both;を指定してみましたがうまくいかなかったのでその時の解決法を載せます。

【html】

<div class="box">
  <video src="動画ファイルのパス"></video>
</div>

【css】

div {
  width: 200px;
  height: 200px;
  border: 1px solid #999;
  resize: both;
  overflow: hidden;
}
video {
    width: 100%;
    height: 100%;
}

videoをdivでくくり、ボックスのサイズをdivで決めてしまう。
videoのサイズはwidth: 100%; height: 100%;でdivに依存させる。
divの方にresizeを指定すればvideoのサイズは外側のdivに引っ張られ、擬似的にリサイズが可能という寸法です。

筆者オススメ技術書

リンク