現在JavaScriptの設定が無効になっています。このページを利用するにはJavaScriptの設定を有効にしてください。2016の8日目の記事です。一覧はこちらこんにちは、お久しぶりです。和昌(@kzms2)と申します。最近はCSSやSVGのアニメーション、ElectronやCordovaなどを用いたハイブリッドアプリなどがお気に入りです。2016と言った世界的なトップカンファレンスにて採択され発表・登壇などを行っていました。上記の論文に関しましては、また別の機会でご紹介できたらと考えております。それでは本題に入ります。pointer-eventsについて皆様はpointer-eventsというCSSプロパティーやその使い道をご存じでしょうか。マイナーな部類だとは思うのですが私はこのCSSプロパティーが好きなので、今回はこのpointer-eventsの概要について少し説明した後に、実例をいくつか載せていきます。ありますが、このCSSプロパティーを一言で説明すると...クリック・タッチイベントを無効化するのに便利と言った感じでしょうか。聞くとJavaScriptの様な説明ですが機能的にはJavaScriptのそれに近いです。以下がデモとソースです。none;">クリック・タップを無効化</a>a要素にhrefが指定してあるのにクリックやタップでは遷移しません。指定により、クリック・タップイベントが無効化されているためです。上記のソースにありますが、クリック・タッチイベントを無効化させるCSSの記述は以下の通りです。何も指定していない要素にはautoがかかっていると考えましょう。autoやnone以外にも値はたくさんあるのですが、他の値はSVG向けなので基本的にはautoとnoneの2つを覚えておけば大丈夫です。ついての細かな仕様を知りたい」という方は、SVGに有効な値も含め以下のサイトに詳しい解説がされているのでそちらをご覧ください。MDNサポートブラウザーに関してサポートブラウザーに関しては少し注意が必要で、IE10以下ではサポートされていません。IE11以上、その他モダンブラウザーやiPhone、Androidのブラウザーで有効です。今回の記事の内容に限ったことではないのですが、使いたいCSSやHTMLの機能がどのブラウザーで対応しているのかを知るには、以下のサイトを使って調べることをオススメします。etc例えば今回説明する要素「pointer-events」と上記サイトの検索窓に入力するとIE10以下は対応していないことがわかります。上記を踏まえpointer-eventsは基本的にモダンブラウザーやスマートフォン向けに使っていくことを想定しましょう。Queriesと併用するここからは具体的な使用例と一緒にサンプルを4点お見せします。それでは各例について説明していきましょう。用いてテキストの前面に画像を配置していても、その後ろ側にあるテキストをクリック・タップ(選択)することが可能です。すると他のHTML要素へのクリック・タップができて便利だったりもするのでオススメです。none;">デスクトップの場合は右クリックから画像を保存、スマートフォンの場合は長押しで画像を保存できますが、上記指定をすることによって画像の保存ができなくなります。「キャプチャー撮ればいいじゃないか」と言われたらそれまでなのですが、保存できないようにする必要がある場面は業務上あると思います。いった時はとても簡単に実装できます。-->冒頭で解説したデモの応用です。上記の例の様に例えばページ内の情報をローディングしている最中に、誤って他のページへ遷移させない様にするといったような用途が考えられます。CSS擬似クラスと合わせるのも良いのではないでしょうか。CSSで操作できるので相性が良いです。上記は具体的な例とは言い難いですが、画面幅などの条件によってクリック・タップイベントを無効化させたい部分がある場合に簡単に実装できます。使う上で気をつける事また上記の例を踏まえた上で、気をつけるべき事がいくつかあります。IE10以下には効かないこれは前述の通りなのですが、IE10以下はサポートされていません。大事なことなので念を押しました。いう名前の通り、キーイベントは無効化しないのでキーボードを用いた操作などに対しては有効ではありません。無効化していても、Tabキーを押してフォーカスを移動して該当箇所にてEnterキーを押した場合はページ遷移してしまいます。JavaScriptとの連携をしっかりする本来ならこういった処理はJavaScript側で吸収する場合が多いです。利いているとJavaScript側での指定が思った通りに動かないという事が起こり得ます。none;をどの場面で使うかをドキュメントにまとめて共通認識を持ちましょう。まとめいかがでしたでしょうか。場面に対して、とても簡単に実装できます。するのではなく、背面にある要素にイベントを拾わせるために使うのが特にオススメです。これらの具体例や特性を理解した上で、有用活用していただけるとうれしいです。JAPANでは情報技術を駆使して人々や社会の課題を一緒に解決していける方を募集しています。詳しくは採用情報をご覧ください。JAPANのサービス開発を支える技術やデザイン、文化を発信しています。Reserved.このページの先頭へ。