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

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

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

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

著者	Mana
発売日	2019/3/16
ページ数	280ページ
Kindle版	◯
レビュー	(1,559件)

１冊ですべて身につくＨＴＭＬ＆ＣＳＳとＷｅｂデザイン入門講座 /ＳＢクリエイティブ/Ｍａｎａ

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

他の参考書も見る

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

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

動画の詳細はこちら 他の動画も見る

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

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

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

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

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

国際電話に対応させる

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

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

<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とは、クリックやタップイベントなどを無効化することができます。

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

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

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

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

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を使った書き方は以下のとおりです。

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

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