--- 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つの値 */ /* 1より大きい値で要素を拡大 */ scale: 2; /* 1より小さい値で要素を縮小 */ scale: 0.5; /* 2つの値 */ scale: 2 0.5; /* 3つの値 */ scale: 2 0.5 2;</pre> <h3 id="Values" name="Values">値</h3> <dl> <dt>1つの数値</dt> <dd>該当する要素の拡大率を指定する {{CSSxRef("<number>")}} であり、 X 及び Y 軸で同じ倍率になります。 <code>scale()</code> (2D 倍率) 関数に1つの値を指定した場合と等価です。</dd> <dt>2つの長さ/パーセント値</dt> <dd>2つの {{CSSxRef("<number>")}} 値で、 2D 倍率における X 軸と Y 軸の拡大率を (それぞれ) 指定します。 <code>scale()</code> (2D 倍率) 関数に2つの値を指定した場合と等価です。</dd> <dt>3つの長さ/パーセント値</dt> <dd>3つの {{CSSxRef("<number>")}} 値で、 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"><div> <p class="scale">Scaling</p> </div></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> <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>