CSSだけで、ボックスの縦横サイズをユーザが変更できるようにできる

CSS3で新たに追加されたresizeプロパティを使うと、ボックスの縦横サイズ(表示面積)をユーザが自由に拡大・縮小できるようになります。テキスト入力欄に限らず、p要素やdiv要素みたいなボックスでも自由に変更できるようにできます。

例えば、以下の緑色の線で囲まれたボックスは、p要素で作った「段落」です。
しかし、ボックスの右下をドラッグすることで、表示面積を自在に伸縮できます。
※ただし、IE・Edge・iOS版Safariは除きます。(Firefox、Chrome、Opera、PC版Safariでは動きます。)

緑色枠の右下端をドラッグしてみて下さい。▲

ボックスのサイズをユーザが変更できるようにするresizeプロパティ

このように、ボックスの縦横サイズを自由に変更できるようにする方法はとても簡単で、下記のようにresizeプロパティを使うだけです。

対象要素 {
   resize: both;
}

上記のように記述すると、そのボックスの縦横サイズをユーザが自由に伸縮できるようになります。縦横両方ではなく片方だけを可変にしたい場合は、以下のような記述も使えます。

resize: horizontal; /* 幅だけ可変 */

resize: vertical;   /* 高さだけ可変 */

resize: none;       /* 変更不可 */

なお、resizeプロパティだけでは可変にはできない場合があります。
少なくとも、p要素やdiv要素などのような、元々サイズが不定で、内容に応じて拡張されるようなボックスの場合は、「縦横サイズを固定する」・「スクロールバーを表示する」といった装飾を同時に指定しておく必要があります。

冒頭の例では、以下のようなCSSソースを使いました。

p {
  border: 2px solid green;
  width: 300px;
  height: 200px;
  overflow: scroll;
  resize: both;
}

複数行のテキスト入力欄(textarea要素)の縦横サイズを可変にした例

冒頭の例は、単に文章を表示するだけの「p要素」に対して適用したものですが、たいていこのプロパティを活用するのは「テキスト入力欄」を作るときでしょうかね。

たくさん情報を詰め込んでいるポータルページのような場所で、各ブロックの表示面積をユーザが自由に決定できるようにしたいときなんかにも使えるかも知れません。(^_^;)

(更新日：2016年03月07日)