ボックスのリサイズを指定するには?
要素書式
resize: 【サイズ変更を許可する方向】;
対応ブラウザ
値一覧
| 値 | 内容 |
| サイズ変更を許可する方向 | ユーザーにボックスのサイズ変更を許可する方向を指定します。
「none」：ユーザーにサイズ変更を許可しない。（既定値）
「both」：幅と高さの両方のサイズ変更を許可する。
「horizontal 」：幅のサイズ変更のみ許可する。
「vertical」：高さのサイズ変更のみ許可する。
「inherit」：親要素の指定を受け継ぐ。 |
解説文
ユーザーがボックスのサイズを変更できるかどうか指定します。
このプロパティを適用するためには、overflowプロパティの値が「visible」（初期値。ボックスの中身がボックスより大きいとき、はみ出して表示させる指定）以外である必要があります。
標準的な実装では、サイズ変更を許可すると、ボックスの右下にサイズ変更用のつまみが表示されます。
なお、ChromeとSafariの二つのブラウザの以前のバージョンの実装は、TEXTAREA要素のみが対象になっています。
サンプルソース
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div#box {
width:300px;
height:300px;
border:solid black 1px;
/* resizeを指定するにはoverflowをvisible以外に指定する必要があります */
overflow:scroll;
/* 幅と高さの両方の変更を許可しています */
resize:both;
}
textarea#text {
width:300px;
height:300px;
resize:none;
}
</style>
</head>
<body>
<div id="box">このブロック要素はサイズ変更が可能です</div>
<hr>
<textarea id="text">このテキストエリアはサイズ変更ができません</textarea>
</body>
</html>
関連項目
（関連項目はありません）
