resize
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
resize は CSS のプロパティで、要素の寸法を変更できるかどうか、もしそうなら、どの方向に変更できるかを設定します。
試してみましょう
resize: both; resize: horizontal; resize: vertical; resize: none; <section class="default-example" id="default-example"> <div id="example-element">Try resizing this element.</div> </section> #example-element { background: linear-gradient(135deg, #0ff 0%, #0ff 94%, #fff 95%); border: 3px solid #c5c5c5; overflow: auto; width: 250px; height: 250px; font-weight: bold; color: #000; display: flex; align-items: center; justify-content: center; padding: 10px; } 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-modeとdirectionの値によって、水平方向または垂直方向のどちらかになります)。 inline-
要素はユーザーが寸法を変更できる仕組みを、インライン方向について表示します (
writing-modeとdirectionの値によって、水平方向または垂直方向のどちらかになります)。
公式定義
| 初期値 | none |
|---|---|
| 適用対象 | overflow が visible 以外である要素、任意で画像、動画、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 |