Scale プロパティ

最終更新：2026-09-13

scale Scale プロパティ

scale プロパティは、2D または 3D 空間で要素を拡大・縮小する個別変換プロパティです。独立したプロパティとしては、translate や rotate などの他の変換と分けて制御でき、特に拡大縮小を単独でアニメーションさせたい場合（ボタンの押下フィードバック、画像の拡大プレビューなど）に便利です。

カテゴリ
初期値	none
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

scale: none | <number> [<number> [<number>]?]?;

⚙️ 値

値	タイプ	説明
`none`	キーワード	拡大縮小なし
`<number>`	タイプ	拡大縮小の倍率（x、y、z を指定可能）

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
scale	✓ v57	✓ v12	✓ v52	✓ v10.1	✓ v44
すべての主要ブラウザーでサポート

ヒント： 1 個の値は X と Y を均一に拡縮します。2 個の値は X 軸と Y 軸を個別に制御します。3 個目の値は Z 軸方向も拡縮します（表示するには perspective が必要です）。

注意： 拡大率 0 は要素を完全に消滅させます。負の値は要素を反転させます（たとえば scale(-1) は鏡像になります）。

❓ よくある質問

Qscale プロパティは要素の実際のサイズやレイアウトに影響しますか？

Aいいえ。scale は純粋に視覚的なものです。要素はドキュメントフロー内で元のサイズとスペースを占めたままであり、周囲の要素は動きません。これは width や height とは完全に異なり、拡大された要素がコンテナからはみ出したり隣接コンテンツを覆ったりする可能性も意味します。視覚的な境界は自分で処理してください。

Qscale と width/height の変更にはどのような違いがありますか？

Awidth や height を変更するとレイアウト上のサイズが変わり、再レイアウトを引き起こして周囲の要素を押しのけます。パフォーマンスは悪くなります。scale は視覚的にのみ拡大縮小し、レイアウトには影響せず、GPU が描画する合成レイヤーで実行されるため滑らかにアニメーションします。アニメーション付きの拡大が必要な場合は scale を、本当にレイアウトサイズを変更する必要がある場合は width/height を使ってください。

QCSS の scale プロパティと zoom の違いは何ですか？

Ascale は標準的な CSS 変換です。視覚的なサイズだけを変更し、レイアウト空間を変更せず、合成レイヤーでアニメーションし、パフォーマンスも良好です。zoom は非標準のプロパティであり、要素の実際のレイアウトサイズと子要素の描画も変更し、ドキュメントフローに影響して再レイアウトを引き起こします。クロスブラウザの一貫性やアニメーション性能の面でも scale の方が優れており、本番環境ではそちらを優先してください。

Q負の scale で要素を鏡像のように反転させるにはどうすればよいですか？

A負の倍率は対応する軸に沿って要素を反転させます。scale: -1 は X 軸方向に水平鏡像（左右反転）、scale: 1 -1 は Y 軸方向に垂直反転します。鏡像の影響は視覚だけであり、レイアウトには影響しません。transition や animation と組み合わせて「裏返し」効果を作れますが、テキストも反転する点に注意してください。必要に応じて複数の transform を組み合わせて修正します。