【CSS Modules】resizeプロパティの使い方
resizeプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
resizeプロパティは、ウェブページ上の要素のサイズをユーザーが変更できるかどうか、およびその方向に関する設定を保持するプロパティです。このプロパティを使用すると、ユーザーがマウス操作によって要素の幅や高さをインタラクティブに調整できるようになります。
設定可能な主な値は以下の通りです。noneは、要素のサイズ変更を一切許可しません。bothは、要素の幅と高さの両方をユーザーが自由に調整できるようにします。これにより、要素の右下隅に表示されるリサイズハンドルをドラッグして、縦横のサイズを同時に変更できます。horizontalは、要素の幅のみがユーザーによって変更可能となり、高さは固定されます。verticalは、要素の高さのみがユーザーによって変更可能となり、幅は固定されます。
このプロパティが有効になるには、対象の要素にoverflowプロパティがvisible以外の値（例えば、autoやscrollなど）で設定されている必要があります。これは、リサイズによって要素の内容がはみ出す可能性を考慮し、スクロール可能にするためです。主に<textarea>要素のようなフォーム部品や、特定のコンテナ要素に対して適用され、ユーザーがコンテンツに合わせて表示領域を調整できる利便性を提供します。
公式リファレンス: resize
構文(syntax)
1resize: none | both | horizontal | vertical | block | inline;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません