CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのscale()関数とは？要素の拡大・縮小方法を実例付きで解説

CSSのscale()関数は、2D平面上で要素のサイズを拡大・縮小するための変換（transform）を定義する際に使用します。scale()関数の引数には、水平方向と垂直方向それぞれのスケール倍率を指定できます。

基本的な構文

transform: scale(x, y);
  • x：水平方向の倍率（省略可能）
  • y：垂直方向の倍率（省略した場合はxと同じ値が適用される）

例えば scale(1.2) と指定すると要素が1.2倍に拡大され、scale(0.5) と指定すると半分のサイズに縮小されます。また、scaleX() や scaleY() を使えば、一方向だけの拡大・縮小も可能です。

サンプルコード1：要素を拡大する

以下の例では、scale(1.2) を使って画像を1.2倍に拡大しています。比較のため、translate()関数で移動させた画像も併せて表示しています。

<!DOCTYPE html>
<html>
<head>
<style>
.translate_img {
    transform: translate(100px, 10%);
}
.scale_img {
    transform: scale(1.2);
    background-color: yellow;
}
</style>
</head>
<body>
<h1>Learn</h1>
<img class="translate_img" src=
"https://www.tutorialspoint.com/videotutorials/assets/videos/courses/509/images/course_509_image.png"
alt="MongoDB">
<img class="scale_img" src=
"https://www.tutorialspoint.com/videotutorials/assets/videos/courses/509/images/course_509_image.png"
alt="MongoDB">
</body>
</html>

出力結果

2つ目の画像が元のサイズより大きく（1.2倍）表示されていることが確認できます。

サンプルコード2：要素を縮小する

次に、scale(0.3) を指定して、画像を元の30%のサイズに縮小する例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
.translate_img {
    transform: translate(100px, 10%);
}
.scale_img {
    transform: scale(0.3);
}
</style>
</head>
<body>
<h1>Learn</h1>
<img class="translate_img" src=
"https://www.tutorialspoint.com/videotutorials/assets/videos/courses/509/images/course_509_image.png"
alt="MongoDB">
<img class="scale_img" src=
"https://www.tutorialspoint.com/videotutorials/assets/videos/courses/509/images/course_509_image.png"
alt="MongoDB">
</body>
</html>

出力結果

2つ目の画像が大幅に縮小されて表示されていることがわかります。

まとめ

scale()関数を使うことで、CSSだけで簡単に要素の拡大・縮小を実現できます。1より大きい値で拡大、1より小さい値で縮小されるという基本ルールを押さえておきましょう。ホバー時のアニメーションなど、transitionプロパティと組み合わせると、より表現力豊かなWebページを作成できます。

  1. CSSのmatrix()関数とは？2D変換行列の使い方をサンプルコードで解説

    CSSのmatrix()関数は、同次2D変換行列（homogeneous 2D transformation matrix）を定義するために使用される関数です。引数には線形変換の値を指定することで、要素に対して拡大縮小・回転・傾斜・移動といった複数の変換を一度に適用できます。 matrix()関数の基本構文 matrix()関数は、以下のように6つの引数を受け取ります。 transform: matrix(a, b, c, d, e, f); 各引数の意味は次のとおりです。 a, d：水平方向・垂直方向の拡大縮小率 b, c：傾斜（スキュー）の度合い e, f：水平方向・垂直方向の移動量（ピ

  2. CSSのtranslate()関数とは？要素を移動させる方法を実例付きで解説

    CSSのtranslate()関数は、要素を水平方向・垂直方向に移動（再配置）するために使用される変換関数です。transformプロパティと組み合わせて使うことで、HTML要素を元の位置から任意の距離だけずらして表示できます。translate()関数の基本構文transform: translate(x軸の移動量, y軸の移動量);第1引数が水平方向（X軸）、第2引数が垂直方向（Y軸）の移動量を表します。値にはpxなどの絶対単位や、%（要素自身のサイズに対する割合）を指定できます。第2引数を省略した場合は、Y方向の移動量は0として扱われます。サンプルコード1：画像を右に50px移動するまず