files/ja/web/css/scale/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134

---
title: scale
slug: Web/CSS/scale
tags:
  - CSS
  - CSS Property
  - Reference
  - Transforms
  - 'recipe:css-property'
translation_of: Web/CSS/scale
---
<div>{{CSSRef}}</div>

<p><strong><code>scale</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、 {{CSSxRef("transform")}} とは個別に独立して倍率変換を指定することができます。これは一般のユーザーインターフェイスの利用においてはより適しており、 <code>transform</code> の値で変換関数を指定する実際の順序を思い出す手間を軽減します。</p>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="brush: css notranslate">/* キーワード値 */
scale: none;

/* １つの値 */
/* 1より大きい値で要素を拡大 */
scale: 2;
/* 1より小さい値で要素を縮小 */
scale: 0.5;

/* ２つの値 */
scale: 2 0.5;

/* ３つの値 */
scale: 2 0.5 2;</pre>

<h3 id="Values" name="Values">値</h3>

<dl>
 <dt>１つの数値</dt>
 <dd>該当する要素の拡大率を指定する {{CSSxRef("&lt;number&gt;")}} であり、 X 及び Y 軸で同じ倍率になります。 <code>scale()</code> (2D 倍率) 関数に１つの値を指定した場合と等価です。</dd>
 <dt>２つの長さ/パーセント値</dt>
 <dd>２つの {{CSSxRef("&lt;number&gt;")}} 値で、 2D 倍率における X 軸と Y 軸の拡大率を (それぞれ) 指定します。 <code>scale()</code> (2D 倍率) 関数に２つの値を指定した場合と等価です。</dd>
 <dt>３つの長さ/パーセント値</dt>
 <dd>３つの {{CSSxRef("&lt;number&gt;")}} 値で、 3D 倍率における X 軸と Y 軸と Z 軸の拡大率を (それぞれ) 指定します。 <code>translate3d()</code> (3D 倍率) 関数と等価です。</dd>
 <dt id="none"><code>none</code></dt>
 <dd>拡大率が適用されないことを示します。</dd>
</dl>

<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>

<p>{{cssinfo}}</p>

<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>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;div&gt;
  &lt;p class="scale"&gt;Scaling&lt;/p&gt;
&lt;/div&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

div {
  width: 150px;
  margin: 0 auto;
}

p {
  padding: 10px 5px;
  border: 3px solid black;
  border-radius: 20px;
  width: 150px;
  font-size: 1.2rem;
  text-align: center;
}

.scale {
  transition: scale 1s;
}

div:hover .scale {
  scale: 2 0.7;
}
</pre>

<h4 id="Result" name="Result">結果</h4>

<p>{{EmbedLiveSample("Scaling_an_element_on_hover")}}</p>

<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>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<p>{{Compat("css.properties.scale")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{cssxref('translate')}}</li>
 <li>{{cssxref('rotate')}}</li>
 <li>{{cssxref('transform')}}</li>
</ul>

<p>注: skew は独立した変形値ではありません</p>