ywork2020.com

Title

要素を拡大縮小させる

目次 (INDEX)

scaleとは

scale とは次の語句からなるCSSの関数です。
scale
読み: スケール
意味: 規模、大きさ、長さ、音階

目次に戻る

scale関数の概要

この関数は、ブロックレベル要素を二次元平面上の特定の点を原点として拡大縮小させます。

scale関数はCSSのtransformプロパティに属する関数です。 指定する値は0以上の実数値で指定します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。この関数の記述は以下のような書き方になります。

  • s-xy: 水平方向と垂直方向の拡大縮小の値を一つの値で指定します。
  • s-x: 水平方向の拡大縮小の値を指定します。
  • s-y: 垂直方向の拡大縮小の値を指定します。
セレクター{transform: scale(s-xy);}
セレクター{transform: scale(s-x, s-y);}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

この関数はブロックレベル要素の二次元平面上の回転を行います。 サンプルは親要素のdiv要素に子要素としてp要素を内包しています。この内包されたp要素に関数を適用していきます。

初期値: 1

この関数を使わない場合と等価の値が初期値の1です。 指定できる値は0以上の実数値のみであり、1が100パーセントの大きさで表示され、 指定値が0.5なら50パーセントの大きさで表示され、指定値が2なら200パーセントの大きさで表示されることになります。

p sample

p{transform: scale(0);}

目次に戻る

数値:

初期値のところでも述べましたが、 この関数に指定できる値は、 0以上の実数値のみであり、1が100パーセントの大きさで表示され、 指定値が0.5なら50パーセントの大きさで表示され、指定値が2なら200パーセントの大きさで表示されることになります。

p sample
scale(1)

p sample
scale(0.8)

p sample
scale(0.8, 1)

p sample
scale(1, 0.8)

p{transform: scale(0.8);}

目次に戻る

備考: 拡大縮小の原点を調整する

補足ではありますが、拡大縮小の原点を設定する場合には、 transform-originプロパティを使用します。 transform-originプロパティの初期値は「50% 50% 0」です。 これは要素の中心が原点であるということなのですが、ここでは詳細は割愛させていただきます。

このサンプルでは拡大縮小の原点を要素の左の角に移動させています。 つまり、拡大縮小の原点は要素の横軸0%の位置(左端)と縦軸の0%の位置(上端)だと指定しています。

p sample
transform-origin: 50% 50%

p sample
transform-origin: 0% 0%

p{
	transform-origin: 0% 0%;
	transform: scale(0.8);
}

目次に戻る

補足説明

  • ブロックレベル要素に適用可能

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

transform: scale(1.5);

transform: scale(1.25);

transform: scale(1); 初期値

transform: scale(0.75);

transform: scale(0.5);

サンプル: ブロック要素

サンプル: インライン要素

目次に戻る