CSS3 resize プロパティ

❮ 前章へ 完全な CSS リファレンス 次へ ❯

例

ユーザによる <div> 要素のサイズが変更できるように指定します：

div {
    resize: both;
    overflow: auto;
}
Try it Yourself ❯

他の "Try it Yourself" 例が下にあります。

定義と用法

resize プロパティは、ユーザによる要素のサイズ変更を可能にするかどうかを指定します

注: resize プロパティは、計算されたオーバフロー値が "visible" 以外になっている要素に適用されます。

デフォルト値： なし
継承： 継承する
アニメーション可否： 不可。animatable を参照
バージョン： CSS3
JavaScript 構文： object.style.resize="both" Try it

ブラウザ・サポート

表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。

-moz- の後に続く数字 は、接頭辞付きで動作した最初のバージョンです。

プロパティ
resize 4.0 未サポート 5.0
4.0 -moz-		 4.0 15.0

CSS 構文

resize: none|both|horizontal|vertical|initial|inherit;

プロパティの値

値 説明 Play it
none デフォルト値。ユーザは要素のサイズを変更できません Play it ❯
both ユーザは要素の高さと幅の両方を調整することができます Play it ❯
horizontal >ユーザは要素の幅を調整することができます Play it ❯
vertical ユーザは要素の高さを調整することができます Play it ❯
initial プロパティにデフォルト値を設定します。initial を参照 Play it ❯
inherit このプロパティは親要素を継承します。inherit を参照
Examples

その他の例

例

ユーザに <div> 要素の高さだけをリサイズさせます：

div {
    resize: vertical;
    overflow: auto;
}
Try it Yourself ❯

例

ユーザに <div> 要素の幅だけをリサイズさせます：

div {
    resize: horizontal;
    overflow: auto;
}
Try it Yourself ❯

例

デフォルトでは、<textarea> 要素はサイズ変更が可能です。 テキストエリアのサイズ変更を防ぐためには resize プロパティを使用します (テキストエリアで「 "grabber" を無効にします)：

textarea {
    resize: none;
}
Try it Yourself ❯

関連ページ

CSS3 チュートリアル：CSS3 User Interface

HTML DOM リファレンス：resize プロパティ


❮ 前章へ 完全な CSS リファレンス 次へ ❯