【CSS Modules】scale()関数の使い方
scale()関数の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
scale()関数は、HTML要素を拡大または縮小する変形を適用する関数です。この関数は、主にCSSのtransformプロパティの値として使用され、要素の視覚的なサイズを変更する際に利用されます。
scale()関数には、大きく分けて2つの記述方法があります。まず、1つの引数を受け取るscale(s)の形式です。この場合、指定された数値sは、要素の幅（X軸方向）と高さ（Y軸方向）の両方に同じ比率で適用されます。例えば、scale(2)と指定すると、要素は元のサイズの2倍に拡大されます。scale(0.5)と指定すると、要素は元のサイズの半分に縮小されます。
次に、2つの引数を受け取るscale(sx, sy)の形式です。この形式では、sxがX軸方向の拡大・縮小比率を、syがY軸方向の拡大・縮小比率を個別に指定します。これにより、幅と高さを異なる比率で変形させることが可能です。例えば、scale(1.5, 0.8)と指定すると、幅は1.5倍に拡大され、高さは0.8倍に縮小されます。引数の値が負の場合、要素は指定された軸に沿って反転しながら拡大・縮小されます。
この関数は、マウスオーバー時の要素の拡大、アニメーションによるダイナミックなサイズ変更、またはレスポンシブデザインにおける要素の調整など、様々な場面で活用されます。scale()関数は、CSSを用いてインタラクティブで視覚的に魅力的なウェブインターフェースを構築するための基本的なツールの一つです。
公式リファレンス: scale()
構文(syntax)
1.element { 2 transform: scale(1.5); 3}
引数(parameters)
sx: <number> | <percentage>, sy?: <number> | <percentage>
- sx: <number> | <percentage>: 要素を水平方向に拡大・縮小する際の倍率、またはパーセンテージ。
- sy?: <number> | <percentage>: 要素を垂直方向に拡大・縮小する際の倍率、またはパーセンテージ。省略可能。
戻り値(return)
戻り値なし
戻り値はありません