blob: 200139e710715bc1f8dfb5b75ee79c69e7648352 (
plain)
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
135
136
137
138
139
140
141
142
|
---
title: zoom
slug: Web/CSS/zoom
tags:
- CSS
- CSS プロパティ
- Microsoft 拡張
- Non-standard
- WebKit 拡張
- リファレンス
- 標準外
translation_of: Web/CSS/zoom
---
<div>{{CSSRef}}{{Non-standard_header}}</div>
<p><span class="seoSummary"> <a href="/en-US/docs/Web/CSS">CSS</a> の標準外の <strong><dfn><code>zoom</code></dfn></strong> プロパティは、要素の拡大率を制御するために使用することができます。</span>できれば、このプロパティの代わりに {{cssxref("transform-function/scale", "transform: scale()")}} を使用してください。ただし、 CSS 変換とは異なり、 <code>zoom</code> は要素のレイアウト時の大きさに影響します。</p>
<pre class="brush: css no-line-numbers">/* キーワード値 */
zoom: normal;
zoom: reset;
/* <percentage> 値 */
zoom: 50%;
zoom: 200%;
/* <number> 値 */
zoom: 1.1;
zoom: 0.7;
/* グローバル値 */
zoom: inherit;
zoom: initial;
zoom: unset;</pre>
<p>{{cssinfo}}</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<h3 id="Values" name="Values">値</h3>
<dl>
<dt><code>normal</code></dt>
<dd>要素を通常のサイズでレンダリングします。</dd>
<dt><code>reset</code> {{non-standard_inline}}</dt>
<dd>ユーザーが非ピンチベースのズームを利用したときは (たとえばキーボードで <kbd>Ctrl</kbd>-<kbd>-</kbd> または <kbd>Ctrl</kbd>+<kbd>+</kbd> のショートカット) 要素を拡大しない。 WebKit (とおそらく Blink) のみサポートされています。</dd>
<dt>{{cssxref("<percentage>")}}</dt>
<dd>ズーム率です。 <code>100%</code> と <code>normal</code> は等価です。 <code>100%</code> よりも大きな値はズームイン、 <code>100%</code>よりも小さな値はズームアウトします。</dd>
<dt>{{cssxref("<number>")}}</dt>
<dd>ズーム率です。対応するパーセンテージ (<code>1.0</code> = <code>100%</code> = <code>normal</code>) に相当します。 <code>1.0</code> よりも大きな値はズームイン、 <code>1.0</code> よりも小さな値はズームアウトします。</dd>
</dl>
<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
{{csssyntax}}
<h2 id="Examples" name="Examples">例</h2>
<h3 id="First_example" name="First_example">最初の例</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><p class="small">Small</p>
<p class="normal">Normal</p>
<p class="big">Big</p></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">p.small {
zoom: 75%;
}
p.normal {
zoom: normal;
}
p.big {
zoom: 2.5;
}
p {
display: inline-block;
}
p:hover {
zoom: reset;
}
</pre>
<h4 id="Result" name="Result">結果</h4>
<p>{{EmbedLiveSample('First_example')}}</p>
<h3 id="Second_example" name="Second_example">2番目の例</h3>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html"><div id="a" class="circle"></div>
<div id="b" class="circle"></div>
<div id="c" class="circle"></div></pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css">div.circle {
width: 25px;
height: 25px;
border-radius: 100%;
text-align: center;
vertical-align: middle;
display: inline-block;
zoom: 1.5;
}
div#a {
background-color: gold;
zoom: normal;
}
div#b {
background-color: green;
zoom: 200%;
}
div#c {
background-color: blue;
zoom: 2.9;
}
</pre>
<h4 id="Result_2" name="Result_2">結果</h4>
<p>{{EmbedLiveSample('Second_example')}}</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<p>このプロパティは標準外であり、 Internet Explorer を起源としています。 Apple は <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW15">Safari CSS Referenceで説明しています</a>。マイクロソフトの Rossen Atanassov は <a href="http://cdn.rawgit.com/atanassov/css-zoom/master/Overview.html">GitHubに非公式の仕様案を公開しています</a>。</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
<p>{{Compat("css.properties.zoom")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>CSS-Tricks' CSS Almanac の <a href="https://css-tricks.com/almanac/properties/z/zoom/"><code>zoom</code> の記事</a></li>
<li> <a href="/ja/docs/Web/CSS/@viewport/zoom"><code>zoom</code> ビューポート記述子</a>、 <a href="/ja/docs/Web/CSS/@viewport"><code>@viewport</code></a> で使用</li>
<li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=390936">Bug 390936: Implement Internet Explorer <code>zoom</code> property for CSS </a>on the Firefox issue tracker Bugzilla</li>
</ul>
|
