BLOG

  • Facebook
  • Twitter

<a href="tel:">のリンクをPC表示時に無効にするCSSの書き方

越水大輔

越水大輔

スマートフォンやタブレットでウェブサイトを見ている時、ボタンにタップすると通話発信ができるようにするための <a href=”tel:”>というリンク設定があります。

モバイルデバイスでの表示のときは便利なのですが、PC表示のときにこのリンクを動作させたくないというケースに多々出くわします。

そんな時はCSSのpointer-eventsを利用するとクリック・タッチイベントを無効化してくれるので、PC用のCSSに書いてあげると便利です。

IE11から利用可能ですので、それ以下のブラウザに対応する場合はjQueryを使う方法を試してください。

参考記事

クリック・タッチを無効化するCSS「pointer-events: none;」がお手軽で便利 – Yahoo! JAPAN Tech Blog

ホームページ制作だけでなくアクセス解析、SNSやブログの運用アドバイスなど様々なWebマーケティングのご相談も承ります。

〈 この記事を書いた人 〉

越水大輔

WEBプロデューサー越水大輔

シンス株式会社 代表取締役
社内ではWeb制作のディレクション、マーケティング、経営を担当しています。Webマーケティングで福岡に元気な企業を増やします。

その他のオススメの記事

ホームページのことは何でもお気軽にご相談ください!

092-406-8630

平日10:00〜18:00セールス目的のお電話はご遠慮ください

シンス株式会社

Webマーケティングのお役立ち情報を発信しています!