resize

試してみましょう

resize: both;

resize: horizontal;

resize: vertical;

resize: none;

<section class="default-example" id="default-example">
  <div id="example-element">この要素をリサイズしてみてください。</div>
</section>

#example-element {
  background: linear-gradient(135deg, cyan 0%, cyan 94%, white 95%);
  border: 3px solid #c5c5c5;
  overflow: auto;
  width: 250px;
  height: 250px;
  font-weight: bold;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

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

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

構文

/* キーワード値 */
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-mode と direction の値によって、水平方向または垂直方向のどちらかになります)。

inline

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

公式定義

形式文法

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

例

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

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

HTML

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

CSS

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

結果

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

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

HTML

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

CSS

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

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

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

結果

仕様書

ブラウザーの互換性

関連情報

• <textarea>