隠れた CSS3 「resize」プロパティ

前回「隠れたCSS3ということでcurrent-color」というプロパティ値を紹介しましたが、今回はユーザーが要素の高さや幅を変更できる「resize」と呼ばれるプロパティを紹介します。現在「resize」はベーシックユーザーインターフェイスモジュールでFirefox 4.0+と Webkit 系のみ実装されています。デフォルトで「textarea」要素にはresizeプロパティが適用されています。このプロパティは、ブロックレベル要素とreplaced（リプレイス）要素に、overflowプロパティの値が「visible」以外場合に適用できます。ただし、このプロパティは 将来的にブラウザベンダーが採用しない場合には削除されるかもしれません。（残念）

記述
resize : none | both | horizontal | vertical | inherit

値の説明
none : 水平方向・垂直方向のいずれにもサイズを変更できません。
both : 水平方向・垂直方向のいずれにもサイズを変更できます。
horizontal : 水平方向へサイズを変更できます。
vertical : 垂直方向へサイズを変更できます。

デモ

実際のデモ

（Firefox4.0+ もしくは webkit系）

HTMLソース

<form action="#" method="post"> 
      <h2> 垂直のみ </h2> 
      <textarea name="elem" id="elem" rows="5" cols="50" class="vert"></textarea> 

      <h2> 水平のみ </h2> 
      <textarea name="elem" id="elem" rows="5" cols="50" class="horiz"></textarea> 

      <h2> 両方 </h2> 
      <textarea name="elem" id="elem" rows="5" cols="50" class="both"></textarea> 

      <h2> なし </h2> 
      <textarea name="elem" id="elem" rows="5" cols="50" class="none"></textarea> 
</form> 



CSSソース

.both {
-webkit-resize : both;
   -moz-resize : both;
        resize : both;
cursor : se-resize; }


.vert {
-webkit-resize : vertical;
   -moz-resize : vertical;
        resize : vertical;
cursor : s-resize; }


.horiz {
-webkit-resize : horizontal;
   -moz-resize : horizontal;
        resize : horizontal;
cursor : e-resize; }
   
.none {
-webkit-resize : none;
   -moz-resize : none;
        resize : none; }



注意：cursor に指定した「e-resize」なども将来的に削除されるかもしれません。