CSS3

プロパティ

resize

→●、mdn

ボックスのリサイズ法。

none

ユーザー エージェントは、要素上にリサイズ用の仕組みを呈示しない ― 利用者には、要素を直にリサイズする操作の仕組みは与えられない。

<DIV style="border:1px solid red;
 width:100px; height:100px;
 resize:none;
 overflow:scroll;
">テスト</DIV>

both

ユーザー エージェントは、［縦、横］両方向に、リサイズ用の仕組みを呈示する ― 利用者は、要素の［縦幅、横幅］どちらも調整できるようになる。

<DIV style="border:1px solid red;
 width:100px; height:100px;
 resize:both;
 overflow:scroll;
">テスト</DIV>

<IMG src="Com/100x50.gif" style="border:1px solid red;
 width:50px; height:50px;
 resize:both;
 overflow:scroll;
">

¶

horizontal

ユーザー エージェントは、横方向に限り、リサイズ用の仕組みを呈示する ― 利用者は、要素の横幅に限り調整できるようになる。

<DIV style="border:1px solid red;
 width:100px; height:100px;
 resize:horizontal;
 overflow:scroll;
">テスト</DIV>

vertical

ユーザー エージェントは、縦方向に限り、リサイズ用の仕組みを呈示する ― 利用者は、要素の縦幅に限り調整できるようになる。

<DIV style="border:1px solid red;
 width:100px; height:100px;
 resize:vertical;
 overflow:scroll;
">テスト</DIV>

block

ユーザー エージェントは、ブロック軸方向に限り、リサイズ用の仕組みを呈示する ― 利用者は、要素のブロック サイズに限り調整できるようになる。

<DIV style="border:1px solid red;
 width:100px; height:100px;
 resize:block;
 overflow:scroll;
">テスト</DIV>

¶

inline

ユーザー エージェントは、行内軸方向に限り、リサイズ用の仕組みを呈示する ― 利用者は、要素の行内サイズに限り調整できるようになる。

<DIV style="border:1px solid red;
 width:100px; height:100px;
 resize:inline;
 overflow:scroll;
">テスト</DIV>

¶

現在、要素上のスクロール用の仕組みについては、overflow プロパティを利用して、その外観を制御することも可能である（例： overflow に対する scroll／hidden）。resize プロパティの目的は、要素上のリサイズ用の仕組み（例： ボックスやウィジェットのリサイズ）の外観と機能を制御できるようにする所にある。

resize プロパティを適用可能なのは、［overflow の算出値が visible でない、要素 ］である。ユーザー エージェント は、 overflow プロパティの値に関わらず、次のものに適用してもよい：

• 画像や動画を表現している置換要素 ― IMG、VIDEO、PICTURE、SVG、OBJECT、CANVAS など。
• IFRAME 要素。

生成内容における resize プロパティの効果は未定義とする。実装は resize プロパティを生成内容に適用するべきでない。

要素が利用者によりリサイズされたときは、ユーザー エージェント は、［DOM 内の、要素のスタイル属性 ］内の［ width、height］プロパティを、利用者から指示されたサイズによる px 単位の長さ値に設定する ― 既存のプロパティ宣言があれば，その !important を除く部分は置換して。

片方の次元のみ、要素がリサイズされた場合、対応するプロパティのみが設定される。

リサイズする精確な方向（すなわち，要素のどの隅を改めるか）は、CSS レイアウトに関するいくつもの要因に依存し得る： 要素は絶対的に位置されているかどうか、right、bottom プロパティを利用して位置されているかどうか、要素の言語が右横書きかどうか、等々。ユーザー エージェントは、利用者にリサイズ用の仕組みをどのように伝えるかを決めるときに、（CSS レイアウトにより決定される）リサイズする方向、並びにプラットフォームの慣行や拘束を考慮するべきである。

ユーザー エージェントは、利用者が要素をリサイズできる範囲に対して課す拘束を［min-width、max-width、min-height、max-height］によるものに限るものとする。

注記： 利用者が要素をリサイズしようと試みても、上書きされたり無視されたように現われる状況があり得る： 例えば、important な宣言がカスケードして、［DOM 内の要素のスタイル属性内の［width、height］プロパティに取って代わるときなど。

要素の resize プロパティの算出値が変化しても、利用者が要素をリサイズすることに因るスタイル属性に対する変更が設定し直されることはない。

テスト