CSSのscaleX()関数で要素の幅を変更する方法

CSSのscaleX()とは

要素の幅を変更したい場合、CSSではscaleX()メソッドを利用できます。scaleX()はtransformプロパティと組み合わせて使用するスケーリング関数で、要素を水平方向（X軸方向）に拡大・縮小することが可能です。

元のレイアウトに影響を与えずに見た目上の幅だけを変えたいときに便利な手法です。

scaleX()の基本構文

scaleX()の構文は以下の通りです。

scaleX(n);

引数の n には、拡大率（スケーリングファクター）となる数値を指定します。例えば、1 が元のサイズ、0.5 なら幅が半分、2 なら幅が2倍になります。負の値を指定すると、要素が左右反転して表示されます。

実装例

実際にscaleX()を使って、黒いdiv要素の幅を縮小してみましょう。

div {
    width: 40px;
    height: 50px;
    background-color: black;
}
.myScaled {
    transform: scaleX(0.9);
    background-color: orange;
}

この例では、基本のdivは幅40px・高さ50pxの黒いブロックとして表示されます。.myScaled クラスを適用した要素は scaleX(0.9) によって水平方向に90%の大きさへ縮小され、オレンジ色で表示されます。

ポイントまとめ

• scaleX()はtransformプロパティ内で指定する
• 1より小さい値で縮小、1より大きい値で拡大
• 元のボックスサイズ（width）自体は変わらず、表示上の幅のみが変化する

高さを変更したい場合は同様に scaleY()、両方を同時に変更したい場合は scale(x, y) を使うと良いでしょう。