files/ja/web/css/zoom/index.md


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
143
144
145
146

---
title: zoom
slug: Web/CSS/zoom
tags:
  - CSS
  - CSS プロパティ
  - 標準外
  - リファレンス
  - recipe:css-property
browser-compat: css.properties.zoom
translation_of: Web/CSS/zoom
---
{{CSSRef}}{{Non-standard_header}}

**_`zoom`_** は [CSS](/ja/docs/Web/CSS) の標準外のプロパティで、要素の拡大率を制御するために使用することができます。できれば、このプロパティの代わりに {{cssxref("transform-function/scale", "transform: scale()")}} を使用してください。ただし、 CSS 座標変換とは異なり、 `zoom` は要素のレイアウト時の大きさに影響します。

```css
/* キーワード値 */
zoom: normal;
zoom: reset;

/* <percentage> 値 */
zoom: 50%;
zoom: 200%;

/* <number> 値 */
zoom: 1.1;
zoom: 0.7;

/* グローバル値 */
zoom: inherit;
zoom: initial;
zoom: unset;
```

## 構文

### 値

- `normal`
  - : 要素を通常のサイズでレンダリングします。
- `reset` {{non-standard_inline}}

  - : ユーザーが非ピンチベースのズームを利用したときは (たとえばキーボードで <kbd>Ctrl</kbd>-<kbd>-</kbd> または <kbd>Ctrl</kbd>+<kbd>+</kbd> のショートカット) 要素を拡大しない。 WebKit (とおそらく Blink) のみ対応しています。
- {{cssxref("&lt;percentage&gt;")}}
  - : ズーム率です。 `100%` と `normal` は等価です。 `100%` よりも大きな値はズームイン、 `100%`よりも小さな値はズームアウトします。
- {{cssxref("&lt;number&gt;")}}
  - : ズーム率です。対応するパーセンテージ (`1.0` = `100%` = `normal`) に相当します。 `1.0` よりも大きな値はズームイン、 `1.0` よりも小さな値はズームアウトします。

## 公式定義

{{cssinfo}}

## 形式文法

{{csssyntax}}

## 例

### 最初の例

#### HTML

```html
<p class="small">Small</p>
<p class="normal">Normal</p>
<p class="big">Big</p>
```

#### CSS

```css
p.small {
  zoom: 75%;
}
p.normal {
  zoom: normal;
}
p.big {
  zoom: 2.5;
}
p {
  display: inline-block;
}
p:hover {
  zoom: reset;
}
```

#### 結果

{{EmbedLiveSample('First_example')}}

### 2 番目の例

#### HTML

```html
<div id="a" class="circle"></div>
<div id="b" class="circle"></div>
<div id="c" class="circle"></div>
```

#### CSS

```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;
}
```

#### 結果

{{EmbedLiveSample('Second_example')}}

## 仕様書

標準には含まれていません。このプロパティは Internet Explorer を起源としています。 Apple は [Safari CSS Referenceで説明しています](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW15)。マイクロソフトの Rossen Atanassov は [GitHub に非公式の仕様案を公開しています](https://cdn.rawgit.com/atanassov/css-zoom/master/Overview.html)。

## ブラウザーの互換性

{{Compat}}

## 関連情報

- CSS-Tricks' CSS Almanac の [`zoom` の記事](https://css-tricks.com/almanac/properties/z/zoom/)
-  `zoom` 記述子（[`@viewport`](/ja/docs/Web/CSS/@viewport) で使用）
- [Bug 390936: Implement Internet Explorer `zoom` property for CSS](https://bugzilla.mozilla.org/show_bug.cgi?id=390936) on the Firefox issue tracker Bugzilla