From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/touch-action/index.html | 165 +++++++++++++++++++++++++++++++ 1 file changed, 165 insertions(+) create mode 100644 files/ja/web/css/touch-action/index.html (limited to 'files/ja/web/css/touch-action') diff --git a/files/ja/web/css/touch-action/index.html b/files/ja/web/css/touch-action/index.html new file mode 100644 index 0000000000..53d4d83b61 --- /dev/null +++ b/files/ja/web/css/touch-action/index.html @@ -0,0 +1,165 @@ +--- +title: touch-action +slug: Web/CSS/touch-action +tags: + - CSS + - CSS Property + - Pointer Events + - Reference + - 'recipe:css-property' + - ポインターイベント +translation_of: Web/CSS/touch-action +--- +

{{CSSRef}}

+ +

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;
+
+ +

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

+ +

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

+ +
+

ジェスチャーが開始された後、 touch-action の値を変更しても、現在のジェスチャーの動作には影響を与えません。

+
+ +

構文

+ +

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

+ + + +

値

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

アクセシビリティの考慮

+ +

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

+ + + +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +
{{csssyntax}}
+
+ +

例

+ +

すべてのジェスチャーの無効化

+ +

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

+ +

HTML

+ +
<div id="map"></div>
+ +

CSS

+ +
#map {
+  height: 400px;
+  width: 400px;
+  background: blue;
+  touch-action: none;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Disabling_all_gestures')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Compat', '#touch-action', 'touch-action')}}{{Spec2('Compat')}}pinch-zoom プロパティ値を追加。
{{SpecName('Pointer Events 3', '#the-touch-action-css-property', 'touch-action')}}{{Spec2('Pointer Events 3')}}pan-left, pan-right, pan-up, pan-down プロパティ値を追加。
{{SpecName('Pointer Events 2', '#the-touch-action-css-property', 'touch-action')}}{{Spec2('Pointer Events 2')}}最新の勧告
{{SpecName('Pointer Events', '#the-touch-action-css-property', 'touch-action')}}{{Spec2('Pointer Events')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{compat("css.properties.touch-action")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf