From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/css/transform-function/scale()/index.html | 158 +++++++++++++++++++++ 1 file changed, 158 insertions(+) create mode 100644 files/ja/web/css/transform-function/scale()/index.html (limited to 'files/ja/web/css/transform-function/scale()') diff --git a/files/ja/web/css/transform-function/scale()/index.html b/files/ja/web/css/transform-function/scale()/index.html new file mode 100644 index 0000000000..585964f29b --- /dev/null +++ b/files/ja/web/css/transform-function/scale()/index.html @@ -0,0 +1,158 @@ +--- +title: scale() +slug: Web/CSS/transform-function/scale() +tags: + - CSS + - CSS 変形 + - CSS 関数 + - Reference +translation_of: Web/CSS/transform-function/scale() +--- +
{{CSSRef}}
+ +

scale() は CSS 関数で、二次元平面上における拡縮する変形を定義します変倍の量がベクトルで定義されるため、水平方向と垂直方向に対して異なる変倍で大きさを変えることができます。結果は {{cssxref("<transform-function>")}} データ型になります。

+ +

+ +

この変形は、二次元ベクトルによって特徴づけられます。座標でどれほどの変倍が各方向において行われるのかを定義します。両方の座標が等しい場合、変倍は一様 (つまり等方的) で、要素の形が保たれます (変倍関数は 相似変換 を定義します)。

+ +

座標の値が [-1, 1] の範囲外の場合、変倍は、その座標の方向に要素を拡大します。この範囲内の場合、変倍は、要素をその座標の方向に縮小します。負の場合、変倍は 点対称化 と大きさの変更を行います。1 と等しい場合、変倍は何もしません。

+ +
メモ: scale() 関数は、二次元の変換のみに適用されます。三次元空間内での変倍を行うには、 scale3d() 関数を使用してください。
+ +

構文

+ +

scale() 関数は、1 つまたは 2 つの値で指定され、それにより各方向に適用される変倍が表現されます。

+ +
scale(sx)
+
+scale(sx, sy)
+
+ +

値

+ +
+
sx
+
変倍ベクトルの横座標を表す {{cssxref("<number>")}}。
+
sy
+
変倍ベクトルの縦座標を表す {{cssxref("<number>")}}。定義されない場合、これのデフォルト値は sx であり、要素の形を保つ一様な変倍となります。
+
+ + + + + + + + + + + + + + + + + + + + + +
ℝ2 上のデカルト座標ℝℙ2 上の同次座標ℝ3 上のデカルト座標ℝℙ3 上の同次座標
sx0 0sy sx000sy0001 sx000sy0001 sx0000sy0000100001
[sx 0 0 sy 0 0]
+ +

例

+ +

X と Y の大きさを一緒に変倍する

+ +

HTML

+ +
<div>Normal</div>
+<div class="scaled">Scaled</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.scaled {
+  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
+  background-color: pink;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Scaling_the_X_and_Y_dimensions_together", "200", "200")}}

+ +

X と Y の大きさを別々に変倍し、原点を平行移動させる

+ +

HTML

+ +
<div>Normal</div>
+<div class="scaled">Scaled</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.scaled {
+  transform: scale(2, 0.5); /* Equal to scaleX(2) scaleY(0.5) */
+  transform-origin: left;
+  background-color: pink;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Scaling_X_and_Y_dimensions_separately_and_translating_the_origin", "200", "200")}}

+ +

アクセシビリティの考慮事項

+ +

拡大や縮小のアニメーションは、特定の種類の偏頭痛を引き起こす原因になりやすいので、アクセシビリティの問題になることがあります。ウェブサイトにこのようなアニメーションを含める必要がある場合は、できればサイト全体で、ユーザーがアニメーションを止める制御ができるようしてください。

+ +

また、 {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} メディア特性を使用することを検討してください。これを使用してメディアクエリを書けば、ユーザーがシステムの設定でアニメーションを減らすよう指定した場合にアニメーションを止めることができます。

+ +

詳しくは以下の文書を参照してください。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Transforms", "#funcdef-transform-scale", "scale()")}}{{Spec2("CSS3 Transforms")}}初回定義
+ +

ブラウザーの対応

+ +

互換性の情報は <transform-function> データ型をご覧ください。

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf