カーソルとポインタ

タッチスクリーン以外のデバイスでは、カーソルはユーザーが操作している対象を把握するための重要な手段です。要素の操作方法や、トラックパッドやマウスの動きがサイトに与える影響に関するヒントを提供することもできます。

カーソル

ブラウザは、カーソルの一般的なユースケースの一部を自動的に処理します。

カーソル付きのデバイスでこのページをご覧になっている場合は、ページ内を移動してみてください。カーソルの変化に気づいていなかったかもしれませんが、カーソルが提供するヒントに注目してください。ポインタをテキストの上に移動すると、カーソルが選択用の I ビームに変わり、テキストを選択できることが示されます。リンクにカーソルを合わせると、カーソルが人差し指で指す手の形に変わり、操作できることを示します。それ以外の場所では、デフォルトのカーソル（多くの場合、矢印）が表示されます。

インタラクティブなサイトを作成する際は、ユーザーがインタラクションをより簡単に理解できるように、カーソルをカスタマイズすることをおすすめします。

ブラウザは、ドラッグ、サイズ変更、選択などのヒントを提供する cursor プロパティのさまざまなキーワードをサポートしています。

サポートされているカーソルで要素のインタラクションを伝えることができない場合は、カーソルとして使用する SVG または PNG 画像を指定することもできます。

キャレット

挿入カーソルは、編集可能なテキスト内の位置を示すために使用されます。これはマウスに追従しないため、カーソルとは異なります。caret-color で色を変更できます。

ユーザーのポインタ入力に応答する

マウスやトラックパッドを使用するユーザーは、タッチスクリーンを使用するユーザーよりも画面上のより正確なポイントを操作できます。マウスの精度のみを考慮して設計すると、タッチスクリーンを使用しているユーザーや、細かい運動制御に問題があるユーザーが、ページを適切に操作できない可能性があります。

一般的な問題としては、ボタンが小さすぎる、インタラクティブ要素同士が近すぎるなどがあります。これにより、ユーザーが正しい要素を操作することが難しくなります。

ボタンなどのインタラクティブなターゲットを十分に大きくすることは、サイトのアクセシビリティを確保するうえで重要なステップです。pointer メディアクエリと any-pointer メディアクエリを使用して、ユーザーの入力デバイスの精度に基づいてスタイルをカスタマイズすることもできます。

pointer メディア機能はユーザーのプライマリ入力デバイスを指し、any-pointer はすべての入力デバイスを指します。マウスなどのデバイスは fine、タッチスクリーンなどのデバイスは coarse と照合できます。none の値は、ユーザーがポインタ付きの入力デバイスを使用していないことを示します。

ポインタ イベントとタッチイベント

特定のタッチスクリーン操作を無効にする

タッチスクリーンを使用している場合、ブラウザは一般的な操作を処理します。たとえば、2 本の指で画面をタッチして広げると、通常はサイトが拡大表示されます。サイトでこれらの動作を実装する必要はありませんが、場合によっては、この動作を無効にしたりオーバーライドしたりすることがあります。

ブラウザが一部のアクションを処理しないようにするには、要素に処理させたいアクションをリストします。pan-x と pan-y は、1 本指のパン操作ジェスチャーを有効にします。これらは、複数の指によるズームとパンを有効にする pinch-zoom とともに有効にできます。

manipulation キーワードは pan-x pan-y pinch-zoom と同等です。manipulation は、ズームのためのダブルタップなど、短時間で複数回のタップが必要な他のタッチ操作を除外します。

touch-action から除外してアクションのブラウザ処理を無効にしたら、そのアクションのポインタ イベントを設定できます。

すべてのイベントとアクションを無効にする

場合によっては、要素がインタラクティブでないことを指定する必要があります。たとえば、ボタンに pointer-events: none を設定すると、ボタンをクリックしたり、ホバー状態をトリガーしたりできなくなります。

理解度を確認する