cssのみでレスポンシブのスマートフォンサイズの時だけ電話番号リンクを有効にする方法

cssのみでレスポンシブのスマホサイズの時だけ電話番号リンクを有効にする方法 css

cssのみでレスポンシブのスマートフォンサイズの時だけ電話番号リンクを有効にする方法

レスポンシブコーディングで、電話番号のリンクをあらかじめ追加しておくことはよくあると思います。目的はもちろんスマートフォンなど通話可能なデバイスでの閲覧の際、簡単に電話してもらうためなのですが、それ以外のPCやタブレットからの閲覧の場合、このリンクは必要ないですよね。

今回は、cssのみでこの電話番号リンクの有効・無効の切り替えをする方法をご紹介します。

css でリンクを無効/有効にする方法

cssで電話番号リンクを無効にしたり、有効にしたりするには、pointer-eventsというプロパティーを使います。「pointer-events: none;」を指定するとリンクがクリックできなくなり、「pointer-events: initial」をクリックするとクリックできるようになります。

具体的なサンプルは下記になります。

a[href*=”tel:”]で電話番号のリンク場合はこの「pointer-events」が有効になるように指定しています。
ブレークポイントは1024pxでそれ以下のサイズの時は「pointer-events: initial;」で電話番号リンクを有効に、それ以上の場合は無効「pointer-events: none;」になる設定です。

切り替えるタイミング(レスポンシブのブレイクポイント)については得に決まりはないのですが、おすすめの切り替えポイントはコチラの記事で紹介しておりますので、ぜひクリックしてご確認ください。

ちなみに、今回サンプルとしてレスポンシブのブレイクポイントを「1024px」のタブレットサイズでの切り替えをご紹介しましたが、これは私自身がレスポンシブのブレークポイントを2点に絞る場合にいつも設定する方法です。
この設定をする理由は2つ。
ひとつは、PCサイズとそれ以外のサイズにとりあえず切り分けできていればユーザーに不便はないと思われるから。
2つ目は、スマホによっては横幅で「599px」を超える機種もあり、そういった機種でタップで電話がかけれず、不便が生じる可能性があるからです。

ブレイクポイントに関しては、お問い合わせを増やしたいサイトオーナーとしては、電話番号タップ無効でこの機会を逃したくないし、ユーザーとしては、電話できないデバイスでクリックしてしまったら、余計なプログラムが立ち上がってきて面倒、、この辺のバランスを考えて最適な選択することが大切だと思います。