CSSサイズ変更プロパティ
例
ここで、ユーザーは<div>要素の高さと幅の両方のサイズを変更できます。
div {
resize: both;
overflow: auto;
}
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
このresize
プロパティは、要素がユーザーによってサイズ変更可能かどうか(およびその方法)を定義します。
注:このresize
プロパティは、overflow = "visible"のインライン要素またはブロック要素には適用されません。したがって、オーバーフローが「スクロール」、「自動」、または「非表示」に設定されていることを確認してください。
デフォルト値: | なし |
---|---|
遺伝性の: | いいえ |
アニメート可能: | 番号。アニメート可能について読む |
バージョン: | CSS3 |
JavaScript構文: | object .style.resize = "both" |
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
数字の後に-moz-が続く場合は、プレフィックスを使用して機能した最初のバージョンを指定します。
Property | |||||
---|---|---|---|---|---|
resize | 4.0 | 79.0 | 5.0 4.0 -moz- |
4.0 | 15.0 |
CSS構文
resize: none|both|horizontal|vertical|initial|inherit;
プロパティ値
Value | Description | Play it |
---|---|---|
none | Default value. The user cannot resize the element | |
both | The user can resize both the height and width of the element | |
horizontal | The user can resize the width of the element | |
vertical | The user can resize the height of the element | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
その他の例
例
ユーザーが<div>要素の高さのみのサイズを変更できるようにします。
div
{
resize: vertical;
overflow: auto;
}
例
ユーザーが<div>要素の幅のみのサイズを変更できるようにします。
div
{
resize: horizontal;
overflow: auto;
}
例
多くのブラウザでは、<textarea>はデフォルトでサイズ変更可能です。ここでは、resizeプロパティを使用して、サイズ変更可能性を無効にしました。
textarea {
resize: none;
}
関連ページ
CSSチュートリアル:CSSユーザーインターフェイス
HTML DOMリファレンス:サイズ変更プロパティ