ホーム プログラミング言語 Web関連 css3 CSS resize (要素のサイズを調整)






CSS resize (要素のサイズを調整)




 
 
ユーザーエクスペリエンスを向上させるために、非常に便利な resize 属性が CSS3 に追加されました.これにより、ユーザーは要素のサイズをドラッグして自由にスケーリングできます.それ以前は、同様の効果を実現するために多くの JavaScript コードが必要でした. resize 属性の構文は次のとおりです。

 

resize: none|both|horizontal|vertical;

構文は次のように説明されています。

  • none: ユーザーは要素のサイズを変更できません。
  • both: ユーザーは要素の高さと幅を調整できます。
  • 水平: ユーザーは要素の幅を調整できます。
  • 垂直: ユーザーは要素の高さを調整できます。

resize 属性を使用する場合は、次の点に注意する必要があります。

  • resize 属性を単独で設定することは無効です。resize 属性を有効にするには、overflow 属性と組み合わせて使用​​する必要があり、overflow 属性の値を auto、hidden、または scroll に設定する必要があります。
  • img 属性や table 属性など、すべての要素が resize 属性を設定できるわけではありません。resize 属性を使用する方法はありません。

サンプルコードは次のとおりです。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div
        {
            border: 1px solid;
            width: 300px;
            resize: both;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div>resize 属性を利用することで、要素の水平および垂直方向のサイズを調整できます。</div>
</body>
</html> 

実行中の効果を次の図に示します。

図: resize プロパティのデモ
図: resize プロパティのデモ

上記のコードを実行すると、要素の右下隅をドラッグして要素のサイズを変更できます。

 

「 CSS のサイズ変更 (要素のサイズを調整)」についてわかりやすく解説!絶対に観るべきベスト2動画

【CSS基礎講座】min-width,max-widthプロパティを学ぼう!(WEBデザイン)
CSSでサイズ指定するときの単位(px,%,vw,vh,em,rem) 横幅や高さの長さを指定するときに、emとか、remとか、vwって言われてもよくわからんのです🥺