transform:scale 要素の拡大・縮小方法

CSS

【CSS transform scaleの使い方】要素の拡大・縮小方法

2022年8月27日

今回は要素を拡大・縮小させることができるCSS関数、scale関数の使い方を紹介していきます。

scale関数が使えるようになると、ホバー時に拡大されるボタンや画像の中央部分がゆっくりズームされるといった実装ができるようになります。

 

 

 

transformで利用するscale関数

scale()は要素をx軸、y軸方向に拡大・縮小させることができるCSS関数です。

■(参考)scale()を使用してホバー時に要素をx軸・y軸方向に拡大している例

実際にscale関数を使った例

なお、scale()はCSSプロパティではなく関数なので、transformプロパティの値として使用します。

引数を2つ取ることができ、1つ目の値にはx軸方向、2つ目の値にはy軸方向への拡大・縮小率を記述します。

transform: scale()の指定方法

使用する数値には「px」などの単位は付けず、「1.5」と記述した場合は「1.5倍」を意味します。

■transform: scale()の指定例

  • transform: scale(1.2, 1.2) ・・・ 要素をx軸方向、y軸方向に1.2倍拡大する
  • transform: scale(0.5, 1.5) ・・・ 要素をx軸方向に0.5倍縮小、y軸方向に1.5倍拡大する

 

transformプロパティで指定できる関数一覧

なお今回の記事では、scale関数の使い方のみを解説しますが、transformプロパティではscale()以外にも使用できる関数が複数存在simasu.

そこで、以下ではtransformプロパティで指定できる関数をまとめました。興味がある方は、他の関数の使い方も調べてみて下さい。

■(参考)transformプロパティで指定できる関数まとめ

scale() 要素を伸縮させることができる関数
translate() 要素を移動させることができる関数
rotate() 要素を回転させることができる関数
skew() 要素を歪ませることができる関数

 

 

scale関数を使って要素を拡大・縮小させる方法

それではここからはscale()の基本的な使い方を紹介します。

scale関数を使って要素をx軸方向やy軸方向に拡大・縮小させたい場合は、前述したように第一引数にx軸、第二引数にy軸方向の拡大・縮小率を指定してあげればOKです。

実際にscale関数を使った例

上の例ではホバー時のみ「scale(1.3, 1.3)と1より大きな数値を指定している為、ボタンが拡大されていることが分かります。

ボタンがホバー時のみx軸、y軸方向に1.3倍拡大されている

なおボタンを縮小させたい場合は、「0~1」の間の少数を指定すればOK。

scale()に0~1の間の少数を指定して要素を縮小している例

要素をx軸・y軸のどちらかのみに拡大・縮小したい場合はscaleX()、scaleY()関数なども使用できます。

scale() 要素をx軸、y軸方向に拡大・縮小することができる関数

引数を2つもつ。(例) scale(2.0, 2.0)

scaleX() 要素をx軸方向に拡大・縮小することができる関数

引数を1つもつ。(例) scaleX(2.0)

scaleY() 要素をy軸方向に拡大・縮小することができる関数

引数を1つもつ。(例) scaleY(2.0)

(補足)scaleZ() 要素をy軸方向に拡大・縮小することができる関数

(※)利用シーンは限られるためここでは解説を割愛します。

(補足)scale3d() 要素をx軸、y軸、z軸方向に拡大。縮小することができる関数

(※)利用シーンは限られるためここでは解説を割愛します。

 

 

(補足)負の値で要素を上下左右に反転が可能

前述したようにscale()の値に1以上の数を指定すると要素を拡大、「0~1」の間の少数を指定すると要素を縮小することができますが、「-1」を指定すると指定した軸方向で要素を反転することが可能です。

scale(-1, 1)を指定してx軸方向で要素を反転させている例

上の例ではx軸方向で「-1」を指定している為、要素が左右反転され表示。また左右反転ではなく上下反転にしたい場合は、y軸方向で「-1」を指定してあげるとOKです。

scale(1, -1)を指定してy軸方向で要素を反転させている例

要素を上下反転させることは少ないかもしれませんが、覚えておくと良いでしょう。

 

 

まとめ・要素の拡大・縮小にはscale関数が便利!

まとめです。今回は要素の拡大・縮小するのに使用することができるCSS関数「scale()」の使い方を紹介しました。

こちらを使用するとホバー時に拡大されるボタンや画像の中央部分がゆっくりズームされるといったアニメーションの実装ができますので覚えておきましょう。


 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。


おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

【おすすめレンタルサーバー比較総まとめ】WordPress対応5社

国内シェア上位のエックスサーバー、ロリポップ、さくらのレンタルサーバ、およびConoHa WING、mixhostを中心にWordPressおすすめレンタルサーバーを比較・紹介していきます。これからWordPressでホームページやブログを開設するためにレンタルサーバー選びを検討している方はこちらをご覧ください。

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【総まとめ】WordPress(ワードプレス)ホームページ作り方

【総まとめ】WordPress(ワードプレス)ホームページ作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

-CSS