DevToolBox

CSS touch-action ジェネレーター

タッチ操作を制御するCSSを生成します

touch-action 値を選択

.target {
  touch-action: auto;
}
auto

デモエリア

タッチしてテスト
このエリアに touch-action が
適用されています

※ タッチデバイスまたはブラウザのデバイスモードで確認してください

touch-action について

基本的な使い方

  • • 特定の要素でタッチジェスチャーを制御したい場合に使用
  • • スワイプ、ピンチズーム、ダブルタップなどを個別に制御可能
  • • カスタムジェスチャーを実装する際に便利

組み合わせのルール

  • • auto, none, manipulation は単独でのみ使用
  • • pan-x/pan-y と pinch-zoom は組み合わせ可能
  • • pan-left/right/up/down は pan-x/y のサブセット

よくある使用例

  • • manipulation: ダブルタップズームを無効化（モバイルボタンなど）
  • • pan-y pinch-zoom: 垂直スクロールとズームのみ許可
  • • none: すべてのタッチ操作を無効化（カスタムジェスチャー実装時）