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

構文

/* キーワード値 */
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-modedirection の値によって、水平方向または垂直方向のどちらかになります)。
inline
要素はユーザーが寸法を変更できる仕組みを、インライン方向について表示します (writing-modedirection の値によって、水平方向または垂直方向のどちらかになります)。

メモ: 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 の定義
編集者草案 blockinline の値を追加
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
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 未対応 なしFirefox 完全対応 あり
完全対応 あり
未対応 4 — ?
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 未対応 なしOpera 完全対応 12.1Safari 完全対応 3WebView Android ? Chrome Android ? Edge Mobile 未対応 なしFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Support on block level, replaced, table cell, or inline block elementsChrome 完全対応 4Edge 未対応 なしFirefox 完全対応 5
補足
完全対応 5
補足
補足 resize doesn't have any effect on <iframe>. See bug 680823)
IE 未対応 なしOpera 完全対応 15Safari 完全対応 4WebView Android ? Chrome Android ? Edge Mobile 未対応 なしFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Support for flow-relative values block and inlineChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 63IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

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

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