CSS の touch-action プロパティは、指定された領域がタッチスクリーンで操作できるかどうか (例えば、ブラウザー内に組み込まれたパン又はズーム機能)、及びその方法を指定します。

/* キーワード値 */
touch-action: auto;
touch-action: none;
touch-action: pan-x;
touch-action: pan-left;
touch-action: pan-right;
touch-action: pan-y;
touch-action: pan-up;
touch-action: pan-down;
touch-action: pinch-zoom;
touch-action: manipulation;

/* グローバル値 */
touch-action: inherit;
touch-action: initial;
touch-action: unset;

初期値auto
適用対象非置換インライン要素、表の行、行グループ、表の列、列グループを除くすべての要素
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

既定で、パン (スクロール) 及びピンチ操作はブラウザーとは独立して別に扱われます。 Pointer_events を使用するアプリケーションは、ブラウザーがタッチジェスチャーの扱いを始めるときに pointercancel イベントを受け取ります。ブラウザーがどのジェスチャーを扱うかについての具体的に定義することによって、アプリケーションはジェスチャーを記憶するために pointermove 及び pointerup リスナーの中で独自の振る舞いを提供することができます。 Touch_events を使用するアプリケーションは、 preventDefault() を呼び出すことでブラウザーのジェスチャーの扱いを無効にすることができますが、イベントリスナーが呼び出される前に、 touch-action を使用してブラウザーにアプリケーションの目的を知らせるようにもしてください。

ジェスチャーが開始されると、ブラウザーはタッチ要素の touch-action の値を、祖先のうちジェスチャーを実装しているもの (言い換えれば、最初のスクロールを含む要素) まで交差させます。つまり実際には、 touch-action は通常、その要素の子孫のいずれかに touch-action を明示的に指定する必要なく、独自の動作を持つ個々の要素にのみ適用されます。ジェスチャーが開始された後、 touch-action 値を変更しても、現在のジェスチャーの動作には影響を与えません。

構文

touch-action プロパティは次の何れかの形で指定することができます。

auto
ブラウザーがすべてのパンやズームのジェスチャーを扱うことを有効にします。
none
ブラウザーがすべてのパンやズームのジェスチャーを扱うことを無効にします。
pan-x
指1本で水平にパンするジェスチャーを有効にします。 pan-y, pan-up, pan-down, pinch-zoom と組み合わせることができます。
pan-y
指1本で垂直にパンするジェスチャーを有効にします。 pan-x, pan-left, pan-right, pinch-zoom と組み合わせることができます。
manipulation
パン及びズームのジェスチャーは有効にしますが、ダブルタップでのズームなど、標準外の追加的なジェスチャーを無効します。ダブルタップでズームすることを無効にすることで、ユーザーが画面をタップしたとき、ブラウザーがクリックイベントの生成を待つ必要がなくなります。これは "pan-x pan-y pinch-zoom" の別名です (互換性のために、これも有効です)。
pan-left, pan-right, pan-up, pan-down
指定された方向へのスクロールを始める指1本のジェスチャーを有効にします。スクロールが始まると、その方向が予約されることがあります。なお、「上」にスクロールすること (pan-up) は、ユーザーが画面の表面を指で下方向にドラッグすることを意味し、同様に pan-left はユーザーが指で右にドラッグすることを意味します。より単純な表現がない限り、複数の方向を組み合わせることができます (例えば、 "pan-left pan-right" は "pan-x" の方がより単純なので不正ですが、 "pan-left pan-down" 有効です)。
pinch-zoom
複数の指でのページのパンやズーム有効にします。これは pan- のあらゆる値と組み合わせることができます。

形式文法

auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation

最も一般的な使い方は、要素 (及びスクロールしないその子孫) のすべてのジェスチャーを無効にして、地図やゲームの画面のように、独自のドラッグやズームの振る舞いを提供することです。

#map {
  touch-action: none;
}

もう一つのよくあるパターンは、水平方向のパンを扱うためにポインターイベントを使用する画像ギャラリーですが、文書自体の垂直スクロールやズームを阻害したくない場合です。

.image-carousel {
  width: 100%;
  height: 150px;
  touch-action: pan-y pinch-zoom;
}

touch-action は、ダブルタップによるズームジェスチャーに対応することによって起きたクリックイベントの遅延を完全に止めるためにもよく使用されます。

html {
  touch-action: manipulation;
}

アクセシビリティの考慮事項

touch action: none; の宣言は、ブラウザー内蔵のズーム機能を操作することを阻害することがあります。これは弱視の人がページのコンテンツを読んで理解できるようになることを阻害します。

仕様書

仕様書 状態 備考
Compatibility Standard
touch-action の定義
現行の標準 pinch-zoom プロパティ値を追加。
Pointer Events – Level 2
touch-action の定義
草案 pan-left, pan-right, pan-up, pan-down プロパティ値を追加。
Pointer Events
touch-action の定義
勧告 初回定義。

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 36Edge 完全対応 12Firefox 完全対応 52
補足
完全対応 52
補足
補足 Not applicable to Firefox platforms that support neither pointer nor touch events.
完全対応 29
補足 無効
補足 Not applicable to Firefox platforms that support neither pointer nor touch events.
無効 From version 29: this feature is behind the layout.css.touch_action.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11
完全対応 11
完全対応 10
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 完全対応 23Safari 未対応 なし
補足
未対応 なし
補足
補足 See WebKit bug 133112.
WebView Android 完全対応 37Chrome Android 完全対応 36Edge Mobile 完全対応 ありFirefox Android 完全対応 52
完全対応 52
完全対応 29
無効
無効 From version 29: this feature is behind the layout.css.touch_action.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 ありSafari iOS 未対応 なし
補足
未対応 なし
補足
補足 See WebKit bug 133112.
Samsung Internet Android 完全対応 あり
manipulationChrome 完全対応 36Edge 完全対応 12Firefox 完全対応 52
補足
完全対応 52
補足
補足 Not applicable to Firefox platforms that support neither pointer nor touch events.
完全対応 29
補足 無効
補足 Not applicable to Firefox platforms that support neither pointer nor touch events.
無効 From version 29: this feature is behind the layout.css.touch_action.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11
完全対応 11
完全対応 10
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 完全対応 23Safari 未対応 なしWebView Android 完全対応 37Chrome Android 完全対応 36Edge Mobile 完全対応 ありFirefox Android 完全対応 52
完全対応 52
完全対応 29
無効
無効 From version 29: this feature is behind the layout.css.touch_action.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 ありSafari iOS 完全対応 9.1Samsung Internet Android 完全対応 あり
double-tap-zoom
非標準
Chrome 未対応 なしEdge 完全対応 12Firefox 未対応 なしIE 完全対応 11
完全対応 11
完全対応 10
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 完全対応 ありFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
pinch-zoomChrome 完全対応 56Edge 完全対応 12Firefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 1285685.
IE 完全対応 11
完全対応 11
完全対応 10
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 完全対応 43Safari 未対応 なしWebView Android 完全対応 56Chrome Android 完全対応 56Edge Mobile 完全対応 ありFirefox Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 1285685.
Opera Android 完全対応 43Safari iOS 未対応 なしSamsung Internet Android 完全対応 6.0
pan-up, pan-down, pan-left and pan-rightChrome 完全対応 55Edge 未対応 なしFirefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 1285685.
IE 未対応 なしOpera 完全対応 42Safari 未対応 なしWebView Android 完全対応 55Chrome Android 完全対応 55Edge Mobile 未対応 なしFirefox Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 1285685.
Opera Android 完全対応 42Safari iOS 未対応 なしSamsung Internet Android 完全対応 6.0

凡例

完全対応  
完全対応
未対応  
未対応
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, Neos21
最終更新者: mfuji09,