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
適用対象elements with overflow other than visible, and optionally replaced elements representing images or videos, and iframes
継承なし
計算値指定値
アニメーションの種類個別

ブラウザーの対応

BCD tables only load in the browser

関連情報