resize

CSS の resize プロパティは、要素の寸法を変更できるかどうか、もしそうなら、どの方向に変更できるかを設定します。

構文

/* キーワード値 */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;

/* グローバル値 */
resize: inherit;
resize: initial;
resize: unset;

resize プロパティは以下の挙げた単一のキーワード値で指定します。

値

none: ユーザーが要素の寸法を制御する方法を提供しません。
both: 要素はユーザーが寸法を変更できる仕組みを、垂直方向と水平方向の両方について表示します。
horizontal: 要素はユーザーが寸法を変更できる仕組みを、水平方向について表示します。
vertical: 要素はユーザーが寸法を変更できる仕組みを、垂直方向について表示します。
block: 要素はユーザーが寸法を変更できる仕組みを、ブロック方向について表示します (writing-mode と direction の値によって、水平方向または垂直方向のどちらかになります)。
inline: 要素はユーザーが寸法を変更できる仕組みを、インライン方向について表示します (writing-mode と direction の値によって、水平方向または垂直方向のどちらかになります)。

メモ: resize は以下の場合は適用されません。

インライン要素
overflow プロパティが visible に設定されたブロック要素

形式文法

none | both | horizontal | vertical | block | inline

例

テキストエリアの寸法の変更を無効化

多くのブラウザーでは、 <textarea> 要素は既定で寸法が変更できます。 resize プロパティでこの動作を上書きすることができます。

CSS

textarea {
  resize: none; /* Disables resizability */
}

HTML

<textarea>Type some text here.</textarea>

結果

任意の要素に対する resize の使用

resize プロパティを使用して、任意の要素の寸法を変更可能にすることができます。以下の例では、寸法が変更可能な <div> の中に、寸法が変更可能な段落 (<p> 要素) を配置しています。

CSS

.resizable {
  resize: both;
  overflow: scroll;
  border: 1px solid black;
}

div {
  height: 300px;
  width: 300px;
}

p {
  height: 200px;
  width: 200px;
}

HTML

<div class="resizable">
  <p class="resizable">
    This paragraph is resizable in all directions, because
    the CSS `resize` property is set to `both` on this element.
  </p>
</div>

結果

仕様書

仕様書	状態	備考
CSS Logical Properties and Values Level 1 resize の定義	編集者草案	`block` と `inline` の値を追加
CSS Basic User Interface Module Level 3 resize の定義	勧告	初回定義

初期値	`none`
適用対象	`overflow` が `visible` 以外である要素、任意で画像、動画、iframe を表す置換要素
継承	なし
計算値	指定通り
アニメーションの種類	離散値

ブラウザーの対応

BCD tables only load in the browser