2019年10月28日

aタグのリンクを無効にするプロパティ「pointer-events: none;」の使い所とIE対策

aタグのリンクを無効にするプロパティ「pointer-events: none;」の使い所とIE対策

お世話になっております。佐藤です。

今回はaタグのリンクをCSSから意図的に変更できるpointer-eventsについて書いていきます。

pointer-eventsの基本

基本的に以下の値が設定出来ます。

pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG のみ */
pointer-events: visibleFill;    /* SVG のみ */
pointer-events: visibleStroke;  /* SVG のみ */
pointer-events: visible;        /* SVG のみ */
pointer-events: painted;        /* SVG のみ */
pointer-events: fill;           /* SVG のみ */
pointer-events: stroke;         /* SVG のみ */
pointer-events: all;            /* SVG のみ */

基本使用する値は「auto」と「none」になると思います。

「pointer-events: none;」の使い所

SeekNext合同会社のフッター画像

上記の画像は弊社の下部に設置してあるCTA(コールトゥアクション)です。最近のサイトではよく見るようなデザイン、機能だと思います。

私が経験してきた案件では以下のような要望がありました。

PCの時に電話をかける事は基本的にないと思うので、PCの時はリンクを効かないようにしてくれませんか?

弊社のサイトではPCサイトでもリンクがあっても問題ないかなと考えているので、「pointer-events」の設定しておりませんが、上記のような要望を解決するのに便利なのが「pointer-events: none;」です。PC画面の際は「pointer-events: none;」を指定し、SP画面の際は「pointer-events: auto;」を指定するだけでリンクの有無を変更することが可能です。

「pointer-events: none;」のIE対策

とても便利なプロパティですが、IEでは効きません。ここでもIE対策が必要になるのかと辛くなります。
ただ、このIE対策は簡単です。以下のプロパティを設定すれば解決します。

a {
  display: inline-block;
  or
  display: block;
  pointer-events: none;
}

<a>タグの初期値は「display:inline;」ですので、状況によって「inline-block」or「block」を指定してあげることでIE対策が可能です。

「pointer-events: none;」のIE対策(補足)

上記の対策でIE対策できますが、IEの古いバージョンには上記の対策でも直りません。クライアント様の環境やユーザー様の環境によっては古いバージョンで見られていることもあるので、PCでは<span>などを使用する方が吉かもしれません。
ただ、簡単にリンクの有無を変更できるプロパティですので、ちょっとした使用にはとても便利です。是非使用してみてください。