resize

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

試してみましょう

resize は以下のものには適用されません。

  • インライン要素
  • overflow プロパティが visible または clip であるブロック要素

構文

css
/* キーワード値 */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;

/* グローバル値 */
resize: inherit;
resize: initial;
resize: revert;
resize: revert-layer;
resize: unset;

resize プロパティは以下に挙げるキーワードから単一の値を指定します。

none

ユーザーが要素の寸法を制御する方法を提供しません。

both

要素はユーザーが寸法を変更できる仕組みを、垂直方向と水平方向の両方について表示します。

horizontal

要素はユーザーが寸法を変更できる仕組みを、水平方向について表示します。

vertical

要素はユーザーが寸法を変更できる仕組みを、垂直方向について表示します。

block

要素はユーザーが寸法を変更できる仕組みを、ブロック方向について表示します (writing-modedirection の値によって、水平方向または垂直方向のどちらかになります)。

inline

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

公式定義

初期値none
適用対象overflowvisible 以外である要素、任意で画像、動画、iframe を表す置換要素
継承なし
計算値指定通り
アニメーションの種類離散値

形式文法

resize = 
none |
both |
horizontal |
vertical |
block |
inline

テキストエリアの寸法の変更を無効化

多くのブラウザーでは、 <textarea> 要素は既定で寸法が変更できます。 resize プロパティでこの動作を上書きすることができます。

HTML

html
<textarea>いくらかテキストを入力してください。</textarea>

CSS

css
textarea {
  resize: none; /* リサイズを無効化 */
}

結果

任意の要素に対する resize の使用

resize プロパティを使用して、任意の要素の寸法を変更可能にすることができます。以下の例では、寸法が変更可能な <div> の中に、寸法が変更可能な段落 (<p> 要素) を配置しています。

HTML

html
<div class="resizable">
  <p class="resizable">
    この要素では CSS の `resize` プロパティが `both` に設定されているため、この段落はすべてリサイズ可能です。
  </p>
</div>

CSS

css
.resizable {
  resize: both;
  overflow: scroll;
  border: 1px solid black;
}

div {
  height: 300px;
  width: 300px;
}

p {
  height: 200px;
  width: 200px;
}

結果

仕様書

Specification
CSS Basic User Interface Module Level 4
# resize

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
resize
block
Support on block level, replaced, table cell, or inline block elements
inline

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

関連情報