cursor: pointer 無効

cursor: pointer 無効の原因と解決策

この文章では、CSSのpointer-eventsプロパティに関する問題について説明しています。特に、cursor: pointerが無効になってしまう原因と、その解決方法を具体的な例を交えて解説しています。

1. pointer-eventsについて

皆様はpointer-eventsというCSSプロパティやその使い道をご存じでしょうか。
少しマイナーな部類に入るかもしれませんが、私はこのCSSプロパティが大好きなので、今回はpointer-eventsの概要と便利な使い方について解説します。

一言で説明すると、pointer-eventsは クリックやタッチイベントを無効化する ために使用します。
JavaScriptの機能のように聞こえるかもしれませんが、CSSで実現できる点が魅力です。

早速ですが、デモとソースコードを見てみましょう。(IE10以下は対応していないので注意が必要です)

■ ソース

<a href="https://www.yahoo.co.jp" style="pointer-events: none;">クリック・タップを無効化</a>

上記の例では、<a>要素にhref属性が指定されているにも関わらず、クリックしてもリンク先に遷移しません。
これは、pointer-events: none; を指定することで、クリック・タップイベントが無効化されているためです。

クリック・タッチイベントを無効化するCSSの記述は以下の通りです。

.target {
  pointer-events: none;
}

pointer-eventsの初期値はautoなので、通常の動作に戻したい場合は pointer-events: auto; と記述します。
何も指定していない要素には、autoが適用されていると考えてください。

autoとnone以外にも値はありますが、それらはSVG向けなので、基本的には autoとnoneの2つを覚えておけば十分 です。

2. サポートブラウザーに関して

pointer-eventsプロパティを使用する際の注意点として、IE10以下ではサポートされていない ことが挙げられます。
IE11以上、その他のモダンブラウザ、スマートフォン(iPhone, Android)のブラウザでは有効です。

使用したいCSSやHTMLの機能がどのブラウザで対応しているのかを知るには、「Can I use」というサイトで検索することをおすすめします。
(https://caniuse.com/)

例えば、「pointer-events」を検索すると、IE10以下では対応していないことがわかります。
そのため、pointer-eventsは 基本的にモダンブラウザやスマートフォン向けに使う ことを想定しましょう。

3. 具体的な例いくつか

pointer-events: none; は、様々な場面で活用することができます。
ここでは、具体的な使用例を4つ紹介します。

3-1. 後ろ側にある要素をクリック・タップさせる

■ ソース

<style>
.pointerEvents--demo2{
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.pointerEvents--demo2__img{
  position: absolute;
  pointer-events: none;
}
.pointerEvents--demo2__detail{
  line-height: 200px;
  vertical-align: middle;
  text-align: center;
}
</style>
<div class="pointerEvents--demo2">
  <img src="star.png" alt="" class="pointerEvents--demo2__img">
  <p class="pointerEvents--demo2__detail">背面のテキストを選択</p>
</div>

position: absolute; などでテキストの前面に画像を配置していても、pointer-events: none; を指定することで、画像を透過させて背後のテキストをクリック・タップ (選択) する ことができます。

3-2. 画像が保存されるのを防止する

■ ソース

<img src="cap.jpg" alt="" style="pointer-events: none;">

通常、デスクトップでは右クリックから、スマートフォンでは長押しで画像を保存できますが、pointer-events: none; を指定することで、画像の保存を無効化 することができます。

もちろん、スクリーンショットを撮ることで保存できてしまう点は注意が必要ですが、簡易的に画像の保存を制限したい場合に有効な手段です。

3-3. 親要素が任意の状態の時にリンクを無効化する

■ ソース

<style>
.pointerEvents--demo3__loading a{
  pointer-events: none;
}
</style>
<div class="pointerEvents--demo3__loading">
  <a href="https://www.yahoo.co.jp">親要素に「pointerEvents--demo3__loading」のclassがある時は遷移させない</a>
</div>

この例では、親要素に特定のclassが付与されている場合に、その子要素であるリンクを無効化しています。
例えば、ページの読み込み中はリンクを無効化し、読み込みが完了したら有効化するといった用途に活用できます。

3-4. Media Queriesと併用する

■ ソース

<style>
@media (max-width: 640px) {
  .pointerEvents--demo4 a{
    pointer-events: none;
  }
}
</style>
<div class="pointerEvents--demo4">
  <a href="https://www.yahoo.co.jp">画面幅が640ピクセル以下の場合クリック・タップを無効化</a>
</div>

pointer-eventsは、@mediaルールの中で使用することもできます。
画面幅などの条件に応じてクリック・タップイベントを無効化したい場合に、簡単に実装できます。

4. 使う上で気をつける事

pointer-events: none; を使用する際に注意すべき点がいくつかあります。

IE10以下には効かない: 前述の通り、IE10以下では pointer-events はサポートされていません。

キーイベントは無効化されない: pointer-events はポインターイベント (マウスやタッチ) のみを制御するもので、キーボード操作は制限できません。

JavaScriptとの連携をしっかりする: pointer-events: none; を指定した要素に対してJavaScriptでイベント処理を行う場合、意図した動作にならない可能性があります。
複数人で開発する場合は、pointer-events の使用箇所をドキュメント化し、共通認識を持つようにしましょう。

5. まとめ

pointer-events: none; は、要素は表示させたいが、クリック・タッチイベントは無効化したい 場合に、非常に便利なCSSプロパティです。
特に、背面にある要素にイベントを拾わせる 場合に効果を発揮します。

この記事で紹介した例を参考に、pointer-events: none; を活用して、よりユーザーフレンドリーなWebサイトを作成してください。

cursor: pointerが無効になる理由

特定の状況下では、cursor: pointerが無効になることがあります。これには主に以下のような理由があります。

親要素にpointer-events: none;が設定されている場合。
兄弟要素が上に重なっている場合、その透明度や位置によってイベントが遮られることがあります。

これにより、期待通りのインタラクションが行えなくなります。

参考文献:

MDN Web Docs - pointer-events

Q&A

Q: pointer-eventsを設定する際の注意点は何ですか？
A: 親要素及び兄弟要素の設定に注意が必要です。
Q: どのような状況でcursor: pointerが無効になりますか？
A: 親要素がpointer-events: none;の場合や、他の要素が重なっている場合です。
Q: 解決策にはどのような手法がありますか？
A: カーソルを適切に設定し、親要素のpointer-eventsを確認することが重要です。

その他の参考記事:css cursor