CSSのpointer-events: noneは重ねた飾りをクリック対象から外すときに使う

写真や見出しの上に半透明の色、線、アイコンを重ねると、下にあるリンクやボタンを押せなくなることがある。飾りそのものを操作させないなら、飾りへ pointer-events: none を指定する。画面の前面に置くことと、クリックを受け取ることは別の役割である。

pointer-events は、要素がポインタ操作の対象になる条件を決めるプロパティである。none を指定した要素は表示されたまま、クリックの対象から外れる。前面の飾りを通して、下にあるリンクを押せるようにしたい場面で使う。

クリックを妨げるのは見えている部品とは限らない

リンクの文字を直接押しても反応しないとき、リンク先の指定やスクリプトだけを疑うと遠回りになる。絶対配置した要素や疑似要素が、リンクの上を覆っていることがある。透明度を下げた飾りでも、ポインタを受け取る範囲は残る。

たとえば、写真全体を会社案内へのリンクにして、その上へ暗い色を重ねる場合を考える。

<a class="company-link" href="/company/">
  <img src="company.jpg" alt="会社案内">
  <span class="company-link__shade"></span>
  <span class="company-link__title">会社案内</span>
</a>

.company-link {
  position: relative;
  display: block;
}

.company-link__shade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .35);
  pointer-events: none;
}

この span は写真を暗く見せるためだけの部品である。読者が色の層を押して何かを行うわけではない。そこでポインタの対象から外すと、見た目を保ったまま親のリンクを押せる。display: none のように飾りを消す指定ではないため、重なり順や色の濃さを変える必要もない。

指定する要素は役割で決める

クリックできない場所を直すため、重なっている要素へ一律に none を指定してはいけない。閉じるボタン、画像を切り替える矢印、入力欄の説明を開く部品まで対象から外せば、見た目は残っても操作できなくなる。

判断は単純である。その部分を読者が押したとき、独自の動作を返すなら対象から外さない。見えるだけで、下のリンクやボタンへ操作を渡すために置いているなら、対象から外す。

重なり順を下げる修正とは目的が違う

前面の飾りが邪魔なら、z-index を下げる方法もある。ただし、飾りを写真や本文の後ろへ回すと、意図した色や線が見えなくなる場合がある。重なり順は表示の順序を決め、pointer-events は操作の受け方を決める。二つを同じ修正として扱わない。

写真の上に薄い格子を見せたいが、リンクは写真のどこを押しても開きたいなら、格子は前面に残してよい。格子へ pointer-events: none を指定する。反対に、前面の部品を押すと詳細を開く設計なら、その部品はリンクと別の操作を持つ。見た目だけの層ではないため、指定してはならない。

疑似要素 :before や :after で飾りを作っている場合も、同じ順で見る。リンク本体の上に疑似要素が広がり、クリックを受け取っていないかを確かめる。親要素の z-index だけを大きくして直ったように見えても、あとで別の層を足したときに同じ問題が戻る。

修正前に操作の範囲を紙へ書き出す

画面を見ながら手当たりしだいに指定を足すより、どこを押せるようにするかを先に決めた方が早い。次のように、画面上の部品を二つに分ける。

これを決めてから、表示だけの部品に限って pointer-events: none を試す。リンクの一部だけが押せない場合は、文字の周囲、画像の端、飾りの上を順に押す。反応しない場所の形が、重ねた要素の幅や高さと一致するなら、その要素が原因である可能性が高い。

CSSを修正したあとは、リンク先へ移動できるかだけで終わらせない。写真の上、文字の上、ボタンの端をそれぞれ押し、意図していない場所が動かないかを見る。クリックを受けない飾りに :hover の見せ方を付けていたなら、それも必要かを見直す。読者に押してほしい場所と、画面が反応する場所をそろえることが目的である。

対応するブラウザは公開前に実機で確かめる

pointer-events はSVGで使われてきた指定をHTMLへ広げる提案としても整理されている。HTMLで使う場合は、制作対象にしているブラウザで、実際にリンクとボタンを操作して確認する。CSSを読めることと、公開画面で期待どおりに押せることは同じではない。

スマートフォン向けのページでは、マウスで押せたからといって確認を終えない。指で押す位置は広くなり、写真の上に置いた飾りや説明文が意図せず操作を遮ることがある。公開前に、写真の中央、端、文字の上を押し、設計したリンク先へ進むかを見る。問題を見つけたら、まず前面の要素に操作の役割があるかを確かめる。その役割がなければ、pointer-events: none を指定する。