CSS transform:scale()の使い方・書き方!要素を拡大・縮小させる方法

要素をまるごと拡大縮小すたい場合はありませんか? ボタンが要素に乗った時に、要素を大きくしたい場合や、アニメーションを組み合わせて表現する場合に使用します。

transform:scaleとは?

「transform」というCSSに馴染みがない人がほとんどなのでは無いかと思います。このtransformは「変形」という意味で、名前の通りCSSを使って要素を変形することが出来ます。

変形とは、

  • 回転(rotate)
  • 拡大、縮小(scale)
  • 移動(translate)
  • 歪み(skew)

の4つを表します。

その中でも、今回は「拡大、縮小(scale)」について解説していこうと思います。

合わせて読みたい

\ CSSについてわからない人は、下記記事で解説しています!参考にどうぞ /

transformの基礎知識

transformについて学習する前に、理解しておきたい基礎知識があります。それは、transformは3次元の方向で制御出来るという点です。

どういうことかというと、今あなたが見ている画面には縦軸(x軸)方向と横軸(y軸)方向のの2種類があります。更に、画面には見えませんが奥行き(z軸)があります。

これらの頂点は、常に左上です。画面の下の方に行くにしたがって、移動量が大きくなります。

transform:scale()の書き方・使用例

transformを使うには、このように書きます。

〇〇 {
  transform: 関数名(値);
}

関数名には、下記を使うことが出来ます。

  • scaleX(x軸): X軸の拡大、縮小を設定できます
  • scaleY(y軸): Y軸の拡大、縮小を設定できます
  • scale(x軸, y軸): X軸、Y軸の2つの拡大、縮小を設定できます
  • scaleZ(): Z軸の拡大、縮小を設定できます(単体ではZ軸方向の拡大、縮小は実現しません)
  • scale3d(): X軸、Y軸、Z軸の拡大、縮小を一括で設定できま

更に、値に使うことが出来るのは01.01など整数や少数を使います。例えば、0はサイズを0%へ縮小する。1.23だとサイズを123%拡大する。という感じになります。

例えば、scaleX(x軸)を使って、x軸方向に要素を拡大させたい場合はこのように書きます。

.elem {
  transform: scaleX(0.5);
}

この場合は、.elemの要素をx軸方向に50%に縮小させる。というい意味になります。

毎回CSSスタイルの事について調べるのは辛くありませんか?

CSSには沢山の種類があります。HTMLと組み合わせると、デザインのコーディングは非常に多くのやり方があり、常に最新の情報を追っていくのは、上級者でも大変です。

特に初心者の場合、どの情報が最新なのかわからず、知らない内に今では使えない古い知識を使っていたなんて事も多くなるのでは無いでしょうか?

そんな時、まずは最新のWeb動向や調べ方、知識を一定水準まで仕入れる事ができ、更にこの知識は古いものだから別のものを探そうと判断出来るようになりたくはないですか?

CodeCamp Webマスターコース」では、最新のHTML5とCSS3を使って授業を受けながら、わからないところは「個別指導」時にわからないところや疑問点を経験豊富なエンジニアに聞くことが出来ます!

CodeCampで学ぶと得られるメリットは下記の3つ

CodeCampで得られるメリットは沢山あるのですが、その中でも主要な3つを紹介します!

CodeCampで学ぶと得られるメリット
  • 時間・場所は選ばない: オンラインなので、仕事や学業と両立可能
    毎日朝7時〜夜24時まで時間や場所を選ばずに学習出来ます。また、365日・世界中のどこでも受講が可能です!もちろん、地方の方もOK!
  • 個別指導が受けられる: 課題の提出・添削は無制限
    自分が出来るようになるまで、課題の提出・添削は無制限で受けられます
  • 受講者数 No.1※ : オンラインプログラミングレッスンNo.1、満足度94.6%※
    実践的なテクニックや質の高いフィードバックのあるおかげで、高い満足度があります!
  • ※日経トレンディ別冊調べ:調査日 2016年10月31日
  • ※満足度:会員向け、レッスン評価アンケートの集計結果より(2018年10月-12月期)

更に、CodeCampは無料体験レッスンも実施しており、「良い方が担当者さんだった!」と、多くの口コミも広がっています!

気になる方は、下記をクリックして無料体験レッスンを受けられるので、申し込んでみてください!

最後に口コミのまとめ