CSS の resize
プロパティは、要素の寸法を変更できるかどうか、もしそうなら、どの方向に変更できるかを設定します。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
構文
/* キーワード値 */
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-mode
とdirection
の値によって、水平方向または垂直方向のどちらかになります)。 inline
- 要素はユーザーが寸法を変更できる仕組みを、インライン方向について表示します (
writing-mode
とdirection
の値によって、水平方向または垂直方向のどちらかになります)。
メモ: resize
は以下の場合は適用されません。
- インライン要素
overflow
プロパティがvisible
に設定されたブロック要素
形式文法
例
テキストエリアの寸法の変更を無効化
多くのブラウザーでは、 <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 の定義 |
編集者草案 | block と inline の値を追加 |
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 |
継承 | なし |
計算値 | 指定値 |
アニメーションの種類 | 個別 |
ブラウザーの対応
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。