CSS

【transform:scale】タグ要素を2次元（x,y）または3次元（x,y,z）に拡大・縮小表示する方法

  /

CSSのtransform: scaleを使用して、タグ要素を2次元（x, y）または3次元（x, y, z）に拡大・縮小表示する方法について紹介します。過去に「jQueryの.cssとzoomでページ全体を拡大・縮小表示してみる」という記事を紹介しましたが、ブラウザの種類によってはzoomプロパティが効かない場合がありました（特にFireFox）。
今回は、その代替としてtransform: scaleを使用して、タグ要素を柔軟に拡大・縮小させる方法を見ていきます。

Contents

CSSのtransformとは

CSSのtransformは、要素を変形させるためのプロパティです。要素を回転させたり、移動させたり、拡大・縮小させたりと、視覚的にさまざまな変形を行うことができます。特に、scaleは要素を2次元または3次元空間で拡大・縮小するために用いられます。2D空間では、scale(x, y)として要素の横幅と縦幅を個別に調整でき、3D空間ではscale3d(x, y, z)を使用して奥行き方向にも調整が可能です。

transform: scaleの基本的な使い方

transform: scaleの基本構文は次のようになります。

selector {
  transform: scale(拡大率);
}

拡大率は1を基準として、1より大きい値を指定すれば要素は拡大され、1より小さい値を指定すれば縮小されます。例えば、transform: scale(2)と指定すれば要素は2倍に拡大され、transform: scale(0.5)と指定すれば要素は半分に縮小されます。また、scaleX()やscaleY()を使って、横方向や縦方向のみに変形を適用することもできます。

具体例：2Dおよび3Dでの拡大・縮小表示

次に、実際にtransform: scaleを使用して、画像要素を2Dおよび3D空間で拡大・縮小する方法を紹介します。以下は、いくつかの例を示したCSSコードです。

<style>
body{
  font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
  padding: 0;
  margin: 0;
  font-size: 24px;
  text-align: center;
}
h1{
  line-height:1.6em;
  text-align:center;
  font-weight:normal;
  padding:10px 0 0 0;
  font-size: 24px;
}
div{
  padding: 40px 0;
  border-top: dotted 1px #cccccc;
}
.demo1 img {
  transform: scale(0.6,0.6);
}
.demo2 img {
  transform: scaleX(0.6);
}
.demo3 img {
  transform: scaleY(0.6);
}
.demo4 img {
  transform: scaleZ(0.6);
}
.demo5 img {
  transform: scale3d(0.6,0.6,0.6);
}
</style>

これらのクラスは、画像要素を異なる方法で拡大・縮小します。scale()は要素全体を均等に縮小し、scaleX()とscaleY()はそれぞれ横方向、縦方向のみに縮小を適用します。scaleZ()は3D空間での奥行きを縮小しますが、実際の2D表示にはあまり影響がない場合があります。scale3d()は3D空間で要素全体を縮小することができます。

タグ要素のHTML例

次に、実際にこれらのクラスを使ったHTMLの記述例を見てみましょう。以下は、300px×300pxサイズの画像要素を拡大・縮小するデモのためのコードです。

<h1>imgタグ（300px×300pxの画像）要素を2次元（x,y）、3次元（x,y,z）に拡大または縮小表示</h1>


<div class="demo1">
scale(0.6,0.6)<br>
<img src="simg.jpg">
</div>

<div class="demo2">
scaleX(0.6)<br>
<img src="simg.jpg">
</div>

<div class="demo3">
scaleY(0.6)<br>
<img src="simg.jpg">
</div>

<div class="demo4">
scaleZ(0.6)<br>
<img src="simg.jpg">
</div>

<div class="demo5">
scale3d(0.6,0.6,0.6)<br>
<img src="simg.jpg">
</div>

このHTMLコードでは、各div要素内にクラスを指定し、CSSで定義した拡大・縮小の効果を画像に適用しています。scale()やscaleX()、scaleY()、scaleZ()など、それぞれの方法で画像の見た目が異なりますので、ぜひ確認してみてください。

ブラウザ対応状況

transform: scaleは、ほとんどのモダンブラウザでサポートされています。例えば、FireFox、Chrome、Edgeの最新バージョン（2021年7月時点）では正常に動作することが確認されています。ただし、すべてのブラウザでの動作を確認したわけではないため、使用する前に必要なブラウザでの確認を行うことをお勧めします。

また、画像を拡大すると解像度が足りずに荒くなることがあるため、縮小表示や視覚的な演出に使用するのが良いでしょう。

タグ要素を拡大・縮小表示するデモ【transform:scale】ページ

以下のデモページで実際の表示を確認してみてください。

タグ要素を拡大・縮小表示するデモ【transform:scale】

応用：アニメーションやインタラクションとの組み合わせ

transform: scaleは、単純な拡大・縮小だけでなく、アニメーションやインタラクティブなエフェクトにも活用できます。例えば、transitionと組み合わせて、ユーザーが要素にマウスホバーした際に徐々に拡大するアニメーションを設定することも可能です。

.demo6 img {
  transition: transform 0.3s ease-in-out;
}

.demo6 img:hover {
  transform: scale(1.2);
}

このコードでは、マウスを画像の上に乗せると画像が1.2倍に拡大され、滑らかに変化します。このような視覚効果は、ユーザー体験を向上させるための素晴らしい手段です。

まとめ

transform: scaleを使用すると、CSSのみで要素を簡単に拡大・縮小表示できるため、ビジュアルデザインやUI/UXの向上に役立ちます。ブラウザの対応状況も良好で、モダンなウェブサイトで広く使用されています。特に、アニメーションやインタラクションと組み合わせることで、ユーザーにとって魅力的な体験を提供することができます。

この記事を参考に、実際に自分のプロジェクトでtransform: scaleを活用してみてください。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

拡大・縮小 transform scale
関連記事