ホームページ制作・SEO対策 福岡のアイドットデザイン。Webマーケティングのご相談も承ります。

お問い合わせ・ご相談はコチラ

blog

ブログ

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

| カテゴリー : HTML/CSS

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

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

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

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

参考記事

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

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

follow us in feedly

Facebookページに「いいね!」して更新情報をチェック!

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。