要素のリサイズ機能が有効かどうかを設定する

CSS - resize

概要

CSSプロパティ｢resize｣は、ユーザーが、要素に対してのリサイズを可能にするかを指定する際に使用します。このプロパティは、form 内の textarea など利用されるのが一般的ですが、実際には、div要素などもリサイズが可能にすることができます。その場合は [overflow] プロパティの｢visible｣以外の値を指定する必要があります。

<div class="resize">
  この要素はリサイズ可能です。
</div>
<style>
div {
  border: 1px solid #ddd;
  width: 150px;
  height: 100px;
}
.resize {
  resize: both;
  overflow: hidden;
}
</style>

取りうる値

キーワードを指定することができます。

{ resize: キーワード; }

指定できるキーワードと説明です。

値	説明
none	初期値です。リサイズ機能を提供しません
both	水平方向と垂直方向にリサイズ操作を可能にします
horizontal	水平方向にリサイズ操作を可能にします
vertical	垂直方向にリサイズ操作を可能にします

使用例

それぞれの値を指定した場合の表示例です。要素によってリサイズできる方向が違うことを確認してみてください。

<div class="resize-both">水平方向、垂直方向にリサイズ</div>
<div class="resize-horizontal">水平方向にリサイズ</div>
<div class="resize-vertical">垂直方向にリサイズ</div>
<style>
div {
  border: 1px solid #ddd;
  padding: 16px;
  width: 150px;
  overflow: hidden;
  margin-bottom: 10px;
}
.resize-both {
  resize: both;
}
.resize-horizontal {
  resize: horizontal;
}
.resize-vertical {
  resize: vertical;
}
</style>

概要

取りうる値

使用例

仕様書