← 一覧へ

やってみようスマホは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()