diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-10-15 01:04:20 +0900 |
---|---|---|
committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-10-22 15:07:25 +0900 |
commit | c921a6c565ddc6f3eef7054903e2566e99fcc414 (patch) | |
tree | 70186190f32604b718e0135ccf58a37061bd4d8f /files/ja/web/css/scale/index.md | |
parent | 991da9bf0975e595f7cc584cdf2ea6cb8a14b7ad (diff) | |
download | translated-content-c921a6c565ddc6f3eef7054903e2566e99fcc414.tar.gz translated-content-c921a6c565ddc6f3eef7054903e2566e99fcc414.tar.bz2 translated-content-c921a6c565ddc6f3eef7054903e2566e99fcc414.zip |
CSS 座標変換の文書を更新(変換関数を除く)
- 2021/10/13 時点の英語版に同期
Diffstat (limited to 'files/ja/web/css/scale/index.md')
-rw-r--r-- | files/ja/web/css/scale/index.md | 119 |
1 files changed, 57 insertions, 62 deletions
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` の値で座標変換関数を指定する実際の順序を思い出す手間を軽減します。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush: css notranslate">/* キーワード値 */ +```css +/* キーワード値 */ scale: none; -/* 1つの値 */ -/* 1より大きい値で要素を拡大 */ +/* 1 つの値 */ +/* 1 より大きい値で要素を拡大 */ scale: 2; -/* 1より小さい値で要素を縮小 */ +/* 1 より小さい値で要素を縮小 */ scale: 0.5; -/* 2つの値 */ +/* 2 つの値 */ scale: 2 0.5; -/* 3つの値 */ -scale: 2 0.5 2;</pre> - -<h3 id="Values" name="Values">値</h3> - -- 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 軸の拡大率を (それぞれ) 指定します。 `translate3d()` (3D 倍率) 関数と等価です。 - <dt id="none">`none`</dt> +/* 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` - : 拡大率が適用されないことを示します。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 {{cssinfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Scaling_an_element_on_hover" name="Scaling_an_element_on_hover">上に乗った際の要素の拡大Scaling an element on hover</h3> +<h3 id="Scaling_an_element_on_hover">上に乗った際の要素の拡大</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div> - <p class="scale">Scaling</p> -</div></pre> +```html +<div> + <p class="scale">Scaling</p> +</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">* { +```css +* { box-sizing: border-box; } @@ -90,41 +102,24 @@ p { div:hover .scale { scale: 2 0.7; } -</pre> +``` -<h4 id="Result" name="Result">結果</h4> +#### Result {{EmbedLiveSample("Scaling_an_element_on_hover")}} -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Transforms 2", "#individual-transforms", "individual transforms")}}</td> - <td>{{Spec2("CSS Transforms 2")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -{{Compat("css.properties.scale")}} +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} ## 関連情報 -<ul> - <li>{{cssxref('translate')}}</li> - <li>{{cssxref('rotate')}}</li> - <li>{{cssxref('transform')}}</li> -</ul> +- {{cssxref('translate')}} +- {{cssxref('rotate')}} +- {{cssxref('transform')}} -注: skew は独立した変形値ではありません +メモ: `skew` には独立した `transform` の値はありません |