未経験からエンジニアになりたい人必見!
おすすめプログラミングスクール3選!

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

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

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

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

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

作成者たにぐち まこと
学習時間9時間
受講者数42,075人
レビュー (8,925件)

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

ページ全体の電話番号を発信させない方法は、以下のタグを<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が設定されている要素は電話発信することができません。