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

こちらの記事では、電話番号をクリックで電話を発信させる方法についてサンプルコード付きで分かりやすくまとめています。

CSSやJavaScript(jQuery含み)などを使ったスマホのみ電話発信させる方法など、応用テクニックも紹介してるのでぜひ参考にしてください。

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

本書情報

著者	Mana
発売日	2019/3/16
ページ数	280ページ
Kindle版	○
レビュー (Amazon)	(2,167件)

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

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！

綺麗なコードが書けるようになる！
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック

本書情報

出版社	オライリージャパン
著者	Dustin Boswell / Trevor Foucher
発売日	2012/6/23
ページ数	260ページ
レビュー (Amazon)	(620件)

先輩くん

より良いコードを書きたい人におすすめの本だよ！

後輩ちゃん

10以上前の書籍ですが、内容は今でも役に立つものばかりです！

【中古】リーダブルコード —より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)／Dustin Boswell、Trevor Foucher、須藤 功平、角 征典

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

電話発信するコードの書き方

<a href="tel:000-1234-5678">000-1234-5678</a>

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

先輩くん

aタグ内にimgタグを入れることで、画像をクリックした時に電話発信させることもできるよ！

国際電話に対応させる場合の書き方

<a href="tel:+81-00-1234-5678">000-1234-5678</a>

グローバルなサイトの場合、日本以外から電話をかけた場合でも電話発信させる必要があります。

その場合は設定する電話番号の頭の数字を入力せず、『tel:+81』を追記します。

スマホのみ電話発信させる方法

CSSのブレイクポイントを使う

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

CSSのブレイクポイントで768px以上の場合にのみ、aタグのhref属性にtel:を使用しているものに対しpointer-events: none;を付与する記述をします。

すると、デバイス幅が768px未満には電話発信することができ、768px以上のデバイスでは電話発信ができないようにすることができます。

JavaScriptのブラウザ判定を使う

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

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

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

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

 JavaScriptやjQueryを使う場合は、ユーザーエージェントでアクセスしてきたデバイスがスマホなのかPCなのかを判定します。

アクセスしてきたデバイスがスマホの場合は、処理を行わずPCでアクセスしてきた場合にのみe.preventDefault()を使ってイベントをキャンセルします。

まとめ

今回は電話番号をクリックで電話を発信させる方法について解説しました。

重要なポイントを忘れないようおさらいを兼ねて下記にまとめました。

先輩くん

電話発信に関する記事を他にも掲載しているので、気になる方ぜひご覧ください！