↩ プログラミング言語 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>

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

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

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

【CSS基礎講座】min-width,max-widthプロパティを学ぼう！（WEBデザイン）

https://www.youtube-nocookie.com/watch?v=M0fKt_rPbHw&pp=ygU7IENTUyDjga7jgrXjgqTjgrrlpInmm7QgKOimgee0oOOBruOCteOCpOOCuuOCkuiqv-aVtCkmaGw9SkE%3D

【CSS基礎講座】min-width,max-widthプロパティを学ぼう！（WEBデザイン） (https://www.youtube-nocookie.com/watch?v=M0fKt_rPbHw&pp=ygU7IENTUyDjga7jgrXjgqTjgrrlpInmm7QgKOimgee0oOOBruOCteOCpOOCuuOCkuiqv-aVtCkmaGw9SkE%3D)

CSSでサイズ指定するときの単位(px,%,vw,vh,em,rem) 横幅や高さの長さを指定するときに、emとか、remとか、vwって言われてもよくわからんのです🥺

https://www.youtube-nocookie.com/watch?v=ufohaEYBfWs&pp=ygU7IENTUyDjga7jgrXjgqTjgrrlpInmm7QgKOimgee0oOOBruOCteOCpOOCuuOCkuiqv-aVtCkmaGw9SkE%3D

CSSでサイズ指定するときの単位(px,%,vw,vh,em,rem) 横幅や高さの長さを指定するときに、emとか、remとか、vwって言われてもよくわからんのです🥺 (https://www.youtube-nocookie.com/watch?v=ufohaEYBfWs&pp=ygU7IENTUyDjga7jgrXjgqTjgrrlpInmm7QgKOimgee0oOOBruOCteOCpOOCuuOCkuiqv-aVtCkmaGw9SkE%3D)

css3