ポインタイベントプロパティ

最終更新：2026-09-13

pointer-events ポインタイベントプロパティ

pointer-events プロパティは、要素がクリックやホバーなどのポインタイベントのターゲットになれるかどうかを制御します。none に設定すると、要素はポインタイベントを完全に無視し、それらは下層の要素へと通り抜けます。これはクリックスルー、インタラクションの無効化、複雑な階層化された UI のインタラクションに使われる一般的なツールです。

カテゴリ
初期値	auto
継承	はい
適用対象	all
アニメーションタイプ	discrete
CSS バージョン	CSS3
状態	標準

📝 構文

pointer-events: auto | none;

⚙️ 値

値	タイプ	説明
`auto \| none`	キーワード	要素がポインタイベントに応答するかどうか

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
pointer-events	✓ v1	✓ v12	✓ v1.5	✓ v4	✓ v1
すべての主要ブラウザーでサポート

ヒント： pointer-events: none を指定すると、要素とそのすべての子要素はポインタイベントを無視します。子要素に再び応答させるには、その子に対して明示的に pointer-events: auto を設定する必要があります。

注意： pointer-events: none はキーボードイベントやフォーカスには影響しません。要素は依然として Tab キーでフォーカスできます。完全に無効化するには tabindex="-1" と組み合わせてください。

❓ よくある質問

Qpointer-events: none と disabled の違いは何ですか？

Adisabled は HTML 属性です。インタラクションをブロックするだけでなく、コントロールのデフォルトのスタイルを変更し、フォームの送信を防ぎ、click イベントを抑制します。pointer-events: none は要素にポインタイベントを無視させるだけです。外観はそのままであり、キーボードからフォーカス可能なままであり、フォームと一緒に送信されます。フォームコントロールを完全に無効化するには、disabled を使う方が適しています。

Qpointer-events: none の値はモバイルのタッチイベントをブロックしますか？

Aはい。pointer-events: none は、マウス、スタイラス、タッチスクリーンを含むすべてのポインタ入力デバイスを同じように扱います。設定すると、要素がポインタイベントのターゲットになることは二度とありません。クリック、タップ、ホバーはすべて下層のレイヤーへと通り抜けます。ただしキーボードイベントには影響しません。要素は依然として Tab でフォーカスできるため、それもブロックするには tabindex="-1" を追加してください。

Qpointer-events: none と visibility: hidden の違いは何ですか？

Avisibility: hidden は要素を非表示にし、完全に非インタラクティブにしますが、レイアウト上のスペースは引き続き占有し、子要素は visibility: visible で再表示できます。pointer-events: none の要素は表示されたままであり、選択可能でフォーカス可能です。単にポインタイベントを無視し、それらは下層の要素へと通り抜けます。前者は非表示にするために、後者はイベントを通過させるために使います。

Qオーバーレイを通り抜けて下層の要素にクリックを届かせるにはどうすればよいですか？

A最上位のオーバーレイに pointer-events: none を設定すると、ポインタイベントはそれを通り抜けて下層の要素へ届きます。典型的なケースは次のとおりです。::before で追加した半透明のベールのような純粋に装飾的なオーバーレイ、地図上の注釈レイヤー、カスタムツールチップなどです。オーバーレイ内にクリック可能でなければならないボタンがある場合は、それらのボタンに個別に pointer-events: auto を復元してください。