やってみようスマホは2本指で広げてください。パソコンはトラックパッドでピンチするか、ダブルクリックで拡大できます
ジェスチャーメジャー(よく見る)
ピンチズーム
Pinch to Zoom
写真や地図を2本指で広げると拡大、つまむと縮小する。
別名ピンチイン・ピンチアウト拡大縮小ズームマグニフィケーション
どこで使われている?
- よく見かける場所
- 写真アプリ、地図、PDFビューア、ネット通販の商品画像
- 使うとよい場面
- 写真や地図の細かいところを拡大して見たいとき
- 避けたい場面
- 文字を読むページ全体(文字の大きさ設定で対応する)
補足指を広げる操作を「ピンチアウト」、つまむ操作を「ピンチイン」と呼びます。
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です(右上の「何を作る?」で変えられます)。
HTML / CSS / JavaScript で「ピンチズーム(Pinch to Zoom)」を実装してください。 動き:画像を2本指で広げると拡大、つまむと縮小する。拡大中は1本指でドラッグして見たい場所に動かせる。ダブルタップで拡大と元のサイズを切り替える。 使う部品:Pointer Events で自作(touch-action: none)、またはライブラリ
もっと詳しく:プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | Pointer Events で自作(touch-action: none)、またはライブラリ |
|---|---|
| iPhoneアプリなら | MagnifyGesture(UIKit なら UIScrollView のズーム) |
| Androidアプリなら | Modifier.transformable |
| Flutterなら | InteractiveViewer |
| React Nativeなら | react-native-gesture-handler の Gesture.Pinch() |