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

【HTML】電話番号クリックで発信させる方法

本記事では、電話番号をクリックした時に電話発信させる方法について解説しています。

会社概要ページなどの電話番号が記載されているページで、このテクニックを使うことでユーザーに優しいページを作成することができます。

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

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

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

href属性に電話番号を入れる

aタグのhref属性にはURLを設定して使われることが一般的ですが、電話番号を設定することでクリックされた時に電話発信させることができます。

設定方法は以下のとおりです。

HTML
<a href="tel:080-xxxx-xxxx">080-xxxx-xxxx</a>

href属性に設定する値の先頭にtel:を指定し、その後に発信させたい電話番号を設定します。

国際電話に対応させる

電話番号を設定するWebサイトがグローバルなサイト(日本人以外にもアクセスがある)の場合、海外からも電話発信できるように国際電話に対応させる必要があります。

その場合、tel:+81の後に電話番号を設定します。

HTML
<a href="tel:+81-80-xxxx-xxxx">080-xxxx-xxxx</a>

+81とは国際電話で日本の番号を表す国番号です。海外から日本に国際電話をかける場合、最初の「0」の代わりに「+81」を付けてダイヤルすることが必要になります。

そのため、href属性に設定する電話番号も「080」から始まる電話番号の場合「80」から設定します。

pointer-events:none

スマートフォンでのみ電話発信させるようにブレイクポイントを使ってpointer-events:noneを設定します。

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

HTML
@media(min-width: 767px){
   a[href^="tel:"]{
      pointer-events: none;
   }
}

JavaScript、jQueryを使って電話発信させる方法

最後にJavaScriptとjQueryを使って電話番号を発信させる方法について解説します。

JavaScriptとjQueryはCSSと違いWebサイトのパフォーマンスに影響が出るので、よほどの理由がない限りは最初に解説したCSSを使った方法で対応することをおすすめします。

Javascript

JavaScriptを使った書き方は以下のとおりです。

JavaScript
const spTel = document.querySelectorAll('[href^="tel:"]');

if (!navigator.userAgent.match(/iPhone|Android.+Mobile/)) {
   for(let i = 0; i < spTel.length; i++){
      spTel[i].addEventListener('click',function(e){
         e.preventDefault();
      })
   } 
}

jQuery

jQueryを使った書き方は以下のとおりです。

jQuery
const $spTel = $('a[href^="tel:"]');

if (!navigator.userAgent.match(/iPhone|Android.+Mobile/)) {
   $($spTel).on('click',function(e){
      e.preventDefault(); 
   })
}