【HTML】電話番号をクリックしても発信させない方法

HTMLではaタグに電話番号を設定していない状態でも、電話番号を表示させると電話発信できるようになっており、実際にスマートフォンでクリックすると電話がかかります。また、数字が連続で並んでいる(FAX番号や商品番号など)とそれを電話番号と認識することがあります。

本記事では、このような電話番号をクリックすると実際に電話がかかってしまうことを防ぐ方法について解説しています。

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

参考書が苦手な人はUdemyの動画がおすすめ
ちゃんと学ぶ、HTML+CSS&JavaScript入門講座

ページ全体の電話番号を発信させない方法

ページ全体の電話番号を発信させない方法は、以下のタグを<head></head>の中に追加します。

HTML

<meta name="format-detection" content="telephone=no">

ページ全体ではなく一部のHTMLだけを電話発信させないためには、CSSのpointer-events: none;を指定します。

pointer-events:noneとは、クリックやタップイベントなどを無効化することができます。

CSS

@media screen and (max-width:767px){
   .tel-none{
      pointer-events: none;
   }
}

上記のコードでは、クラスにtel-noneが設定されている要素は電話発信することができません。