このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

resize:ユーザーによるサイズの変更CSS3で追加

記事Sep. 23rd,2020
要素のユーザーによるサイズの変更の可否を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 resize: none;
適用対象 overflow”プロパティの値がvisible”でない要素、任意で画像や動画、iframe”要素などの置換要素
継承 しない
パーセント値 パーセント値は指定できません

resize”プロパティは要素のユーザーによるサイズの変更の可否を指定するプロパティです。

ユーザーによるサイズの変更ができる場合はブラウザはユーザーが操作して要素のサイズを変更する仕組みを提供します。多くのブラウザでは要素の右下につまみを表示し、ドラッグすることでサイズを変更することができます。

サイズの変更が可能な要素に表示されるつまみ

サンプルコード

div { resize: vertical;}

説明
none ブラウザはユーザーによるサイズ変更の方法を提供しない
both ブラウザはユーザーによる垂直方向と水平方向のサイズ変更の方法を提供する
horizontal ブラウザはユーザーによる水平方向のサイズ変更の方法を提供する
vertical ブラウザはユーザーによる垂直方向のサイズ変更の方法を提供する

仕様書

Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告(REC)
resize
定義なし

定義なし

定義あり

定義あり
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告(REC)
none
定義なし

定義なし

定義あり

定義あり
both
定義なし

定義なし

定義あり

定義あり
horizontal
定義なし

定義なし

定義あり

定義あり
vertical
定義なし

定義なし

定義あり

定義あり

使用例

ユーザーによるサイズの変更はできない

div { overflow: auto;
resize: none;}
このボックスは大きさが変更できません。

ユーザーによるサイズの変更ができる

div {
overflow: auto;
resize: both;
}
このボックスは大きさが変更できます。
div {
overflow: auto;
resize: vertical;
}
このボックスは高さが変更できます。
div {
overflow: auto;
resize: horizontal;
}
このボックスは横幅が変更できます。
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク