resize

概要

CSS の resize プロパティは、要素のリサイズの制御ができます。

構文

/* Keyword values */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;

/* Global values */
resize: inherit;
resize: initial;
resize: unset;

値

none

この値は、ユーザーに要素のリサイズ機能を提供しない事を意味します。

both

ユーザーによる要素のリサイズ操作を、全方向に対して可能にします。

horizontal

ユーザーによる要素の水平方向のリサイズ操作を許可します。

vertical

ユーザーによる要素の垂直方向のリサイズ操作を許可します。

block

writing-mode と direction の値によって、ブロック方向内でによる要素を水平方向、または垂直方向へのリサイズ操作を許可します。

inline

writing-mode と direction の値によって、インライン方向内でによる要素を水平方向、または垂直方向へのリサイズ操作を許可します。

例

テキストエリアのリサイズを無効化する

CSS

resize プロパティに対応したブラウザ（Gecko 2.0 Firefox 4 以降）では、<textarea> 要素はデフォルトでリサイズ可能になっています。この動作は以下の様な指定で上書きする事が出来ます。

textarea.example {
  resize: none; /* disables resizability */
}

HTML

<textarea class="example">Type some text here.</textarea>

Result

任意の要素をリサイズ可能にする

「概要」の章に記述されている条件を満たした要素は全てリサイズ可能にする事が出来ます。リサイズ可能な <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, because the CSS resize property is set to 'both' on this
    element.
  </p>
</div>

Result

仕様

ブラウザ実装状況

[1] resize は <iframe> 上では効果がありません（バグ 680823）。

関連情報

• <textarea>