From c921a6c565ddc6f3eef7054903e2566e99fcc414 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 15 Oct 2021 01:04:20 +0900 Subject: CSS 座標変換の文書を更新（変換関数を除く） MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/10/13 時点の英語版に同期 --- files/ja/web/css/scale/index.md | 119 +++++++++++++++++++--------------------- 1 file changed, 57 insertions(+), 62 deletions(-) (limited to 'files/ja/web/css/scale/index.md') diff --git a/files/ja/web/css/scale/index.md b/files/ja/web/css/scale/index.md index 19f527c1b8..6c67160e65 100644 --- a/files/ja/web/css/scale/index.md +++ b/files/ja/web/css/scale/index.md @@ -3,65 +3,77 @@ title: scale slug: Web/CSS/scale tags: - CSS - - CSS Property + - CSS プロパティ - Reference - - Transforms - - 'recipe:css-property' + - 座標変換 + - recipe:css-property +browser-compat: css.properties.scale translation_of: Web/CSS/scale --- {{CSSRef}} -**`scale`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 {{CSSxRef("transform")}} とは個別に独立して倍率変換を指定することができます。これは一般のユーザーインターフェイスの利用においてはより適しており、 `transform` の値で変換関数を指定する実際の順序を思い出す手間を軽減します。 +**`scale`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 {{CSSxRef("transform")}} とは個別に独立しての拡大縮小変換を指定することができます。これは一般のユーザーインターフェイスの利用においてはより適しており、 `transform` の値で座標変換関数を指定する実際の順序を思い出す手間を軽減します。 -

構文

+## 構文 -
/* キーワード値 */
+```css
+/* キーワード値 */
 scale: none;
 
-/* １つの値 */
-/* 1より大きい値で要素を拡大 */
+/* 1 つの値 */
+/* 1 より大きい値で要素を拡大 */
 scale: 2;
-/* 1より小さい値で要素を縮小 */
+/* 1 より小さい値で要素を縮小 */
 scale: 0.5;
 
-/* ２つの値 */
+/* 2 つの値 */
 scale: 2 0.5;
 
-/* ３つの値 */
-scale: 2 0.5 2;
- -

値

- -- １つの数値 - - : 該当する要素の拡大率を指定する {{CSSxRef("<number>")}} であり、 X 及び Y 軸で同じ倍率になります。 `scale()` (2D 倍率) 関数に１つの値を指定した場合と等価です。 -- ２つの長さ/パーセント値 - - : ２つの {{CSSxRef("<number>")}} 値で、 2D 倍率における X 軸と Y 軸の拡大率を (それぞれ) 指定します。 `scale()` (2D 倍率) 関数に２つの値を指定した場合と等価です。 -- ３つの長さ/パーセント値 - - : ３つの {{CSSxRef("<number>")}} 値で、 3D 倍率における X 軸と Y 軸と Z 軸の拡大率を (それぞれ) 指定します。 `translate3d()` (3D 倍率) 関数と等価です。 -
`none`
+/* 3 つの値 */ +scale: 2 0.5 2; + +/* グローバル値 */ +scale: inherit; +scale: initial; +scale: revert; +scale: unset; +``` + +### 値 + +- 1 つの数値 + - : 該当する要素の拡大率を指定する {{CSSxRef("<number>")}} であり、 X および Y 軸で同じの拡大縮小になります。 `scale()` (2D の拡大縮小) 関数に 1 つの値を指定した場合と等価です。 +- 2 つの長さ/パーセント値 + - : 2 つの {{CSSxRef("<number>")}} 値で、2D の拡大縮小における X 軸と Y 軸の拡大率を (それぞれ) 指定します。 `scale()` (2D の拡大縮小) 関数に 2 つの値を指定した場合と等価です。 +- 3 つの長さ/パーセント値 + - : 3 つの {{CSSxRef("<number>")}} 値で、3D の拡大縮小における X 軸と Y 軸と Z 軸の拡大率を (それぞれ) 指定します。 `scale3d()` (3D の拡大縮小) 関数と等価です。 +- `none` - : 拡大率が適用されないことを示します。 -

公式定義

+## 公式定義 {{cssinfo}} -

形式文法

+## 形式文法 {{csssyntax}} -

例

+## 例 -

上に乗った際の要素の拡大Scaling an element on hover

+

上に乗った際の要素の拡大

-

HTML

+#### HTML -
<div>
-  <p class="scale">Scaling</p>
-</div>
+```html +
+ 

Scaling

+
+``` -

CSS

+#### CSS -
* {
+```css
+* {
   box-sizing: border-box;
 }
 
@@ -90,41 +102,24 @@ p {
 div:hover .scale {
   scale: 2 0.7;
 }
-
+``` -

結果

+#### Result {{EmbedLiveSample("Scaling_an_element_on_hover")}} -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Transforms 2", "#individual-transforms", "individual transforms")}}{{Spec2("CSS Transforms 2")}}初回定義
- -

ブラウザーの互換性

- -{{Compat("css.properties.scale")}} +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} ## 関連情報 - +- {{cssxref('translate')}} +- {{cssxref('rotate')}} +- {{cssxref('transform')}} -注: skew は独立した変形値ではありません +メモ: `skew` には独立した `transform` の値はありません -- cgit v1.2.3-54-g00ecf