概要

touch-actionプロパティは、CSSでタッチデバイスにおけるタッチジェスチャーの挙動を制御するためのプロパティです。このプロパティを使用することで、ユーザーがタッチ操作を行った際に、スクロールやズーム、パンなどの挙動を細かくコントロールすることができます。特にモバイルデバイスやタブレットなど、タッチ操作を主要なインターフェースとするデバイスで、ユーザー体験を最適化するために役立ちます。

touch-actionプロパティの基本構文

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

touch-action: auto | none | pan-x | pan-y | manipulation | pinch-zoom;
  • auto デフォルトの設定で、ブラウザがタッチ操作を自動的に処理します。
  • none すべてのタッチジェスチャーを無効化します。スクロールやズームなども禁止されます。
  • pan-x 横方向のパン（スクロール）操作のみを許可します。
  • pan-y 縦方向のパン（スクロール）操作のみを許可します。
  • manipulation パンとピンチズーム操作のみを許可し、それ以外のジェスチャーを無効化します。
  • pinch-zoom ピンチによるズームを許可しますが、それ以外の操作は無効化されます。

使用例

基本的な使用例

以下の例では、touch-actionプロパティを使ってタッチジェスチャーを制御しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>touch-actionプロパティの例</title>
<style>
.no-scroll {
touch-action: none; /* タッチ操作を無効化 */
width: 300px;
height: 200px;
background-color: #ff6347;
margin: 20px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
}
.horizontal-pan {
touch-action: pan-x; /* 横スクロールのみを許可 */
width: 300px;
height: 200px;
background-color: #4682b4;
margin: 20px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
}
.vertical-pan {
touch-action: pan-y; /* 縦スクロールのみを許可 */
width: 300px;
height: 200px;
background-color: #32cd32;
margin: 20px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
}
</style>
</head>
<body>
<h2>touch-actionを使ったタッチ操作の制御</h2>
<div class="no-scroll">スクロールとズーム無効</div>
<div class="horizontal-pan">横スクロールのみ許可</div>
<div class="vertical-pan">縦スクロールのみ許可</div>
</body>
</html>

この例では、3つの異なる設定が施されたボックスが表示されます。

  • .no-scroll：すべてのタッチ操作が無効化されており、スクロールやズームができません。
  • .horizontal-pan：横方向のスクロールのみが許可されているため、縦方向のスクロールやズームはできません。
  • .vertical-pan：縦方向のスクロールのみが許可されており、横方向のスクロールやズームはできません。

画像ギャラリーでの使用

タッチ操作の制御は、スライダーや画像ギャラリーの実装でも役立ちます。以下の例では、スライド操作を横方向のスクロールに限定しています。

<div class="gallery">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
</div>
<style>
.gallery {
display: flex;
overflow-x: auto;
touch-action: pan-x; /* 横スクロールのみ許可 */
gap: 10px;
}
.slide {
min-width: 300px;
height: 200px;
background-color: #ff6347;
color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
font-size: 20px;
}
</style>

この設定により、ギャラリー内の画像スライダーは横方向のスクロールのみが可能となり、縦方向のスクロールが誤って発生するのを防ぎます。

touch-actionプロパティの注意点

  • 適切な設定が必要
    touch-actionの設定が不適切だと、期待しないタッチ操作が発生し、ユーザー体験を損なう可能性があります。特に、意図的に無効化した操作がある場合は、明確な意図がユーザーに伝わるようにすることが重要です。
  • ブラウザ互換性
    touch-actionはモダンなブラウザでサポートされていますが、古いバージョンのブラウザでは正しく動作しない場合があります。ターゲットとするデバイスとブラウザの互換性を確認してから使用することが推奨されます。
  • パフォーマンスへの影響
    touch-actionを使用すると、ブラウザがタッチ操作をどのように処理するかを変えるため、適切に設定することでパフォーマンスの最適化にも繋がります。逆に、誤った設定がパフォーマンス低下を引き起こすこともあるため、慎重な実装が求められます。

まとめ

touch-actionプロパティは、タッチデバイスにおけるユーザーインターフェースの操作感を細かく調整するための強力なCSSプロパティです。スクロールやズーム、パン操作などを適切に制御することで、ユーザーが思い通りに操作できるインターフェースを実現できます。デバイスやユーザーシナリオに応じて最適な設定を施し、使いやすさと操作性を高めるデザインを目指しましょう。

参照:

touch-actionプロパティ（`CSS`） | MDN Web Docs