CSS/touch-action

touch-actionプロパティ

touch-actionプロパティは、タッチデバイスでのユーザー操作に対して、ブラウザがどのように応答するかを制御するために使用されます。このプロパティを適切に設定することで、タッチジェスチャー（パン、ズームなど）の挙動をカスタマイズし、ウェブアプリケーションのユーザー体験を最適化できます。

基本構文

以下は、touch-actionプロパティの基本的な構文です。

element {
  touch-action: 値;
}

値には、タッチジェスチャーの許可や制限に関するキーワードを指定します。

主な値とその意味

touch-actionプロパティには、以下のような値を指定できます。

auto: デフォルトのブラウザ動作を許可します。パンやズームが可能です。

div {
  touch-action: auto;
}

none: すべてのタッチジェスチャー（パン、ズーム、スクロール）を無効化します。

canvas {
  touch-action: none;
}

pan-x: 横方向のパン操作（左右のスクロール）を許可します。

.horizontal-scroll {
  touch-action: pan-x;
}

pan-y: 縦方向のパン操作（上下のスクロール）を許可します。

.vertical-scroll {
  touch-action: pan-y;
}

pan-left, pan-right, pan-up, pan-down: 特定の方向へのパン操作を許可します。
pinch-zoom: ピンチジェスチャーでのズームを許可します（通常は拡大/縮小操作）。
manipulation: 通常のパン操作やピンチズームを許可します（タップやクリックは影響を受けません）。

img {
  touch-action: manipulation;
}

使用例

以下は、タッチ操作をカスタマイズする具体的な例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>touch-actionの例</title>
  <style>
    body {
      margin: 0;
    }
    .no-gesture {
      width: 100vw;
      height: 50vh;
      background-color: lightcoral;
      touch-action: none;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5em;
      color: white;
    }
    .vertical-pan {
      width: 100vw;
      height: 50vh;
      background-color: lightblue;
      touch-action: pan-y;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5em;
      color: white;
    }
  </style>
</head>
<body>
  <div class="no-gesture">タッチ操作無効</div>
  <div class="vertical-pan">縦方向のスクロールのみ有効</div>
</body>
</html>

このコードを実行すると、上半分の赤い領域ではタッチ操作が無効化され、下半分の青い領域では縦方向のスクロールのみ許可されることを確認できます。

使用上の注意

タッチデバイス専用：touch-actionプロパティは、タッチスクリーンデバイスでのみ効果を発揮します。マウスやキーボード操作には影響しません。
パフォーマンスの向上：パンやズームを無効化することで、ブラウザが不要な処理を省略できるため、アプリケーションのパフォーマンスが向上する場合があります。
ポインタイベントとの関係：touch-actionプロパティは、ポインタイベント（Pointer Events）仕様の一部であり、これらのイベントと連携して動作します。
フォールバックに注意：古いブラウザではサポートされていない場合があるため、必要に応じて適切なフォールバックを実装してください。

まとめ

touch-actionプロパティを活用することで、タッチデバイス向けのインターフェースを柔軟に制御できます。パン操作やズームの制限、カスタムジェスチャーの実現など、アプリケーションの操作性を最適化するための重要なツールとして覚えておきましょう。