<a href="tel:">のリンクをPC表示時に無効にするCSSの書き方
スマートフォンやタブレットでウェブサイトを見ている時、ボタンにタップすると通話発信ができるようにするための <a href=”tel:”>というリンク設定があります。
モバイルデバイスでの表示のときは便利なのですが、PC表示のときにこのリンクを動作させたくないというケースに多々出くわします。
そんな時はCSSのpointer-eventsを利用するとクリック・タッチイベントを無効化してくれるので、PC用のCSSに書いてあげると便利です。
1 2 3 | a[href^="tel:"] { pointer-events: none; } |
IE11から利用可能ですので、それ以下のブラウザに対応する場合はjQueryを使う方法を試してください。
参考記事
クリック・タッチを無効化するCSS「pointer-events: none;」がお手軽で便利 – Yahoo! JAPAN Tech Blog
ホームページ制作だけでなくアクセス解析、SNSやブログの運用アドバイスなど様々なWebマーケティングのご相談も承ります。