resizeプロパティ
resize プロパティは、
textarea
または他の要素（他の要素ではすべてのブラウザで動作するわけではありません）のサイズ変更を禁止または許可します。
構文
セレクタ {
resize: both | horizontal | vertical | none;
}
値
| 値 | 説明 |
|---|---|
both |
要素を幅と高さの両方向にリサイズできます。 |
horizontal |
要素を幅方向のみにリサイズできます。 |
vertical |
要素を高さ方向のみにリサイズできます。 |
none |
要素のサイズを変更できません。 |
デフォルト値: none。一部のブラウザでの textarea に対する値: both。
resize をサポートしていないブラウザでは、textarea は none が指定されているかのように動作します。
例 . both 値
要素を両方向にリサイズします:
<textarea></textarea>
textarea {
resize: both;
width: 200px;
height: 200px;
}
:
例 . horizontal 値
要素を水平方向のみにリサイズします:
<textarea></textarea>
textarea {
resize: horizontal;
width: 200px;
height: 200px;
}
:
例 . vertical 値
要素を垂直方向のみにリサイズします:
<textarea></textarea>
textarea {
resize: vertical;
width: 200px;
height: 200px;
}
:
例 . none 値
要素を一切リサイズできません:
<textarea></textarea>
textarea {
resize: none;
width: 200px;
height: 200px;
}
:
例 . 幅と高さの制限
max-width、
min-width、
max-height、
min-height プロパティを使用して、最小幅・最大幅、最小高さ・最大高さを制限できます:
<textarea></textarea>
textarea {
resize: both;
min-height: 100px;
max-height: 300px;
min-width: 100px;
max-width: 300px;
}
:
