We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

概要

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

初期値none
適用対象elements with overflow other than visible, and optionally replaced elements representing images or videos, and iframes
継承不可
メディアvisual
計算値指定値
Animation typediscrete
正規順序形式文法で定義される一意のあいまいでない順序

構文

/* 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-modedirection の値によって、ブロック方向内でによる要素を水平方向、または垂直方向へのリサイズ操作を許可します。
inline
writing-modedirection の値によって、インライン方向内でによる要素を水平方向、または垂直方向へのリサイズ操作を許可します。
注意: resize は、overflow プロパティに visible が指定された要素に対しては適用されない事に注意して下さい。

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

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

仕様

仕様書 策定状況 コメント
CSS Logical Properties and Values Level 1
resize の定義
勧告改訂案 blockinline の追加
CSS Basic User Interface Module Level 3
resize の定義
勧告案 初期定義。

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート (<textarea>) 1.0 4.0 (2.0)-moz 未サポート 12.1 3.0 (522)
ブロックレベル要素、置換要素、テーブルセル、インラインブロックに対する適用(※overflowvisible が指定されている要素は不可) 4.0 5.0 (5.0)[1] 未サポート 15 4.0
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート (<textarea>) ? ? ? ? ?
ブロックレベル要素、置換要素、テーブルセル、インラインブロックに対する適用(※overflowvisible が指定されている要素は不可) ? ? ? ? ?

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

関連情報

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: YuichiNukiyama, SphinxKnight, Sebastianz, ethertank, sosleepy
最終更新者: YuichiNukiyama,