Amazonチャージ 1000ポイントキャンペーン

スマホのみ電話番号のリンク(tel:)を有効にする方法

スマホのみ電話番号のリンク(tel:)を有効にする方法

レスポンシブコーディングでよくある電話番号のリンク。

PCはリンクなし、スマホの時だけリンクを有効にするためにあなたはどうやって実装してますか?

display:noneの表示・非表示で実装もできるんですが、もっと簡単に実装する方法を見つけたんです。

そんなわけでこの記事では下記のように『スマホ表示だけリンクを有効』をCSSのみで実装する方法を紹介します。

  • PC表示ではクリックできない
  • SP表示でのみリンクが機能する

スマホの横幅の時だけpointer-eventsを有効

結論を先に言うと、『pointer-events』というプロパティでクリック自体の有効・無効を制御することが可能なんです。

例えば下記のような記述でスマホの時だけリンクを有効にすることができます。

ちなみにCan I useでもpointer-eventsはIE11以降やモダンブラウザー・iPhone、Androidのブラウザーで利用可能です。

Click Here

Can I use

他にもpointer-eventsが使えるケース

他にも細かいポイントですが以下のような時にはpointer-eventsを使えるんじゃないかと思います。

  • セレクトボックスの▼アイコン(疑似要素beforeとafter)部分もクリックできるようにしたい時
  • 画像の保存防止

セレクトボックスの▼アイコン(疑似要素beforeとafter)部分もクリックできるようにしたい時

セレクトボックスのデザインをCSSで表現する際によく三角マークのアイコンを右端にbeforeやafterを付けますよね。

ただその場合、アイコンの箇所をタップしてもセレクトボックスの上にあるアイコン(疑似要素)をタップしている影響で反応しないわけです。

そこでアイコンを表現している疑似要素に対してpointer-events: none;を指定することでアイコン(疑似要素)は無効になり、セレクトボックスが反応します。

細かいポイントですがユーザビリティーをアップするためにはこんな使い道もあるよ〜ってことですね。

画像の保存防止

画像自体はPCで右クリックを押すと『名前を付けて画像を保存』と表示されますが、pointer-events: none;を指定することで画像と認識されなくなり、画像を保存することができなくなります。

まぁ、デベロッパーツールを使える方には意味ないんですが、抑止力にはなるかな?とは思います。

スマホのみ電話番号のリンク(tel:)を有効にする方法まとめ

このページではスマホのみ電話番号のリンク(tel:)を有効にする方法について書きました。

意外と電話番号のリンクの切り替えに出くわすことが多いので、このテクニックを使ってサクッとコーディング完成まで目指しましょう!

ではでは、くらパパ( @Cloud_san99)でした。