SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

CSSのpointer-eventsの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:18動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:02今回のテーマは、ポインター・イベンツです。
  4. 0:05ボタンやリンクは、ふだんクリックやタップで反応します。
  5. 0:08ポインター・イベンツは、その要素がマウスや指といったポインター操作の対象になるかどうかを、
  6. 0:12シーエスエス側から決めるプロパティです。
  7. 0:16値をノーンにすると、要素は見えたままでもクリックを受け付けず、操作はその下にある要素へ通り抜けます。
  8. 0:22見た目を変えずに、当たり判定だけを消すようなイメージです。
  9. 0:26書き方から実例、一番間違えやすいキーボード操作との違いまで、順番に見ていきましょう。
  10. 0:31まず基本の書き方です。
  11. 0:33書き方はほかのプロパティとまったく同じで、対象のセレクターに、プロパティ名、
  12. 0:37コロン、値、セミコロンを書きます。
  13. 0:41スライドの例では、クラス名デモを持つ要素に、ポインター・イベンツ、ノーンと指定しています。
  14. 0:47これで、その要素はマウスやタッチの対象から外れます。
  15. 0:51反対に、通常通り反応させたいときは、値をオートに変えるだけです。
  16. 0:55まずはこの一行を書いて、実際にボタンをクリックしてみる、という小さな実験から始めてください。
  17. 1:02セレクターで効かせる範囲を正確に選ぶことが、意図しない要素まで無反応にしないための第一歩になります。
  18. 1:09指定できる主な値を整理します。
  19. 1:11エイチティーエムエルの要素では、中心は二つだけです。
  20. 1:15オートは通常通り、クリックやタップ、ホバーの対象になる状態です。
  21. 1:20ノーンはその逆で、対象そのものから外れる指定で、今回の主役です。
  22. 1:24クリックだけでなく、ホバーなどのポインター由来の反応も起きなくなります。
  23. 1:30仕様には、ビジブル・ペインテッドなど、エスブイジーの図形の塗りや線の部分だけを対象にする値も並んでいますが、
  24. 1:35ふだんのページ作りではまず出番がありません。
  25. 1:40まずはオートとノーンの対比を確実に言い分けられることが、理解の土台になります。
  26. 1:46初期値と継承を確認します。
  27. 1:48初期値はオート、通常の継承はします。
  28. 1:51前回のユーザー・セレクトとは逆で、継承する点が特徴です。
  29. 1:55親にノーンと書けば、子要素にもその扱いが引き継がれます。
  30. 1:59ただし、子要素側で改めてオートと書き直せば、その子だけを再び操作の対象に戻せます。
  31. 2:05大きな面を無反応にしつつ、中のボタンひとつだけを押せるようにする、といった使い分けはこの性質のおかげです。
  32. 2:13汎用値も書けます。
  33. 2:14インヘリットは親の計算値を使う指定、イニシャルは初期値オートに戻す指定、
  34. 2:19アンセットは継承するプロパティなのでインヘリットと同じ扱いです。
  35. 2:24継承する、という一言を軸に覚えておきましょう。
  36. 2:27ここが一番大事な注意点です。
  37. 2:29ポインター・イベンツのノーンは、あくまでポインター操作だけを対象から外す指定です。
  38. 2:34キーボード操作を無効にするものではありません。
  39. 2:36たとえばボタンにノーンを付けても、タブキーを押して回るフォーカスの移動先に、
  40. 2:40そのボタンが残る場合があります。
  41. 2:43クリックできないのにキーボードでは押せてしまう、という食い違いが起こるわけです。
  42. 2:47本当に操作できない部品にしたいフォームの要素には、エイチティーエムエルのディスエーブルド属性など、
  43. 2:51意味に合った無効化を併せて使ってください。
  44. 2:55見た目が押せなそうだから大丈夫、とポインター・イベンツだけで済ませないことが、
  45. 2:59誰にとっても正しく使えるページへの第一歩です。
  46. 3:03実例を見ていきます。
  47. 3:04まずエイチティーエムエルの用意です。
  48. 3:07ステージという土台の箱の中に、デモというクラスを付けたボタンをひとつ置きます。
  49. 3:13ボタンの文字は、操作の見本、です。
  50. 3:15頭の部分、ヘッドには、スタイルシートを読み込むリンクを置いてください。
  51. 3:20今回は文章ではなく、あえてボタンを使うのがポイントです。
  52. 3:24ボタンなら、クリックに反応するかどうかがはっきり分かります。
  53. 3:29次のシーエスエスで、土台の見た目を整えてから、最後にポインター・イベンツを指定し、
  54. 3:33クリックできるかどうかを比べます。
  55. 3:37ファイルの置き場所がずれるとスタイルシート自体が読み込まれないので、読み込みの前提も一緒に確認しておきましょう。
  56. 3:46次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。
  57. 3:50ステージとデモには、余白や枠線、背景色といった土台の見た目を先に整えます。
  58. 3:56そして最後に、今回変更するプロパティとして、デモへポインター・イベンツ、
  59. 3:59ノーンを追加します。
  60. 4:02これでブラウザーを開くと、ボタンはふだんと変わらない見た目のまま表示されますが、
  61. 4:07クリックしても反応しなくなります。
  62. 4:11大切なのは、土台の指定は比較のための下準備で、結果を変えているのは最後の一行だけだ、
  63. 4:14という点です。
  64. 4:18保存と再読み込みを忘れずに行ってください。
  65. 4:21枠線と背景色があるおかげで、どの要素に指定が効いているのかが目で追いやすくなります。
  66. 4:27値を変えて比べてみましょう。
  67. 4:29最後のポインター・イベンツの値だけを、ノーンからオートへ置き換えます。
  68. 4:34ファイルを保存してブラウザーを再読み込みし、もう一度ボタンをクリックすると、
  69. 4:38今度は通常通り反応するようになります。
  70. 4:42比較のコツは、変えるのはこの値ひとつだけにすることです。
  71. 4:46あわせて、ノーンの状態でタブキーを押してボタンへ移動し、エンターキーで操作できるかどうかも確かめてみてください。
  72. 4:53マウスでは無反応でも、キーボードでは別の結果になることを、自分の手で体験しておくと、
  73. 4:57注意点の意味がはっきり分かります。
  74. 5:01操作して初めて、値ごとの違いが体感として身に付きます。
  75. 5:05実際の活用パターンを紹介します。
  76. 5:07定番は、重ねて表示した装飾を通り抜けさせる使い方です。
  77. 5:11画像の上に半透明のラベルや模様を重ねると、その部分のクリックが装飾に遮られてしまうことがあります。
  78. 5:18装飾側にノーンを付ければ、見た目はそのままに、クリックだけが下の画像やリンクへ届きます。
  79. 5:24もうひとつは、親全体をノーンにし、操作させたい子だけをオートに戻すパターンです。
  80. 5:29地図や図の上に浮かぶパネルなどで使われます。
  81. 5:32逆に、ボタンを押せなくする目的だけで使うのは避けてください。
  82. 5:36その場合は、前のセクションで話した通り、ディスエーブルドなど本来の無効化と組み合わせるのが鉄則です。
  83. 5:43効かないときの確認手順です。
  84. 5:45まず開発者ツールを開きます。
  85. 5:47ネットワークでスタイルシートが取得できているか、エレメンツで対象のクラスとセレクターが一致しているかを確認してください。
  86. 5:55スタイルズで宣言に打ち消し線があれば、別の宣言に負けています。
  87. 5:59コンピューテッドで最終的な値も確認しましょう。
  88. 6:03ポインター・イベンツ特有の落とし穴は二つあります。
  89. 6:06ひとつは、子要素側にオートが書かれていて、親のノーンが部分的に戻されているケースです。
  90. 6:12もうひとつは、キーボード操作で反応したのを見て、ノーンが効いていないと誤解するケースです。
  91. 6:18三百二十ピクセル程度の画面幅や文字の拡大でも、内容が読めて操作できるかまで確かめると、
  92. 6:22確認漏れがぐっと減ります。
  93. 6:26最後に互換性とまとめです。
  94. 6:28対応はとても古くから広く、クロームは一以降、エッジは十二以降、ファイアフォックスは一・五以降、
  95. 6:33サファリは四以降です。
  96. 6:38アンドロイド版クロームは十八以降、アイオーエス版サファリは三・二以降という記録で、
  97. 6:43オートもノーンも同じ範囲で使えます。
  98. 6:48練習は、まずノーンとオートの違いを自分の言葉で説明し、次に値だけを変えて結果を比べることです。
  99. 6:56まとめます。
  100. 6:57ポインター・イベンツは、ポインター操作の対象になるかを決める指定です。
  101. 7:03初期値はオート、継承はします。
  102. 7:05そして、キーボード操作は止めない、という注意を忘れないでください。
  103. 7:11関連するユーザー・セレクトやカーソルと切り分けて覚えておきましょう。
  104. 7:16お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

pointer-eventsの役割と主な指定値を解説。マウスやタッチで対象が反応するかが変わります。キーボード操作との差も確認します。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのpointer-eventsの使い方：指定値・実例・効かない原因とブラウザー互換性 →