HTML コーディング代行会社のブログ

電話番号リンク (a href="tel:xxx") をパソコンで無効化する方法2019.07.20

電話番号リンクは、スマートフォンサイトでは欠かせない "1 タップで発信可能な" 便利な機能である一方で、パソコン環境ではリンクをクリックしても実際に通話することは出来ませんし、それなら押せないようにしておきたいですよね。今回は css で電話番号リンクを有効・無効化する設定方法をシェアしたいと思います。コーディングの際、特にお客様から指定の無い場合は、こちらの設定をお忘れなく！

HTML

<a href="tel:05053612394">050-5361-2394</a>

CSS

@media screen and (min-width: 768px) {

  a[href^="tel:"] {
    pointer-events: none;
  }

}

POINT

上記サンプルは、幅 768px 以上の電話番号リンクを一括で無効化する設定となっています。実装の際には使いやすいようカスタマイズしてください。

コーディング部ログ TOP