この翻訳は不完全です。英語から この記事を翻訳 してください。

概要

CSS の resize プロパティは、閲覧者による要素のサイズ変更の可否と、リサイズ方向の制限を指定するのに用います。

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

構文

none | both | horizontal | vertical

none
この値は、ユーザーに要素のリサイズ機能を提供しない事を意味します。
horizontal
ユーザーによる要素の水平方向のリサイズ操作を許可します。
vertical
ユーザーによる要素の垂直方向のリサイズ操作を許可します。
both
ユーザーによる要素のリサイズ操作を、全方向に対して可能にします。
注意: 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 Basic User Interface Module Level 3
The definition of 'resize' in that specification.
勧告候補  

ブラウザ実装状況

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

関連情報

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

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