このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
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> <div>この要素をリサイズしてみてください。</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の値によって、水平方向または垂直方向のどちらかになります)。
公式定義
| 初期値 | none |
|---|---|
| 適用対象 | overflow がvisible 以外である要素、任意で画像、動画、iframe を表す置換要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式文法
resize =
none|
both|
horizontal|
vertical|
block|
inline
例
テキストエリアの寸法の変更を無効化
多くのブラウザーでは、<textarea> 要素は既定で寸法が変更できます。resize プロパティでこの動作を上書きすることができます。
HTML
<textarea>いくらかテキストを入力してください。</textarea>CSS
textarea { resize: none; /* リサイズを無効化 */}結果
任意の要素に対する resize の使用
resize プロパティを使用して、任意の要素の寸法を変更可能にすることができます。以下の例では、寸法が変更可能な<div> の中に、寸法が変更可能な段落 (<p> 要素) を配置しています。
HTML
<div> <p> この要素では 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;}結果
仕様書
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # resize |