HTML/CSS

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

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

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

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

本書情報
著者Mana
発売日2019/3/16
ページ数280ページ
Kindle版
レビュー
(Amazon)
(2,167件)
先輩くん
先輩くん
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!
後輩ちゃん
後輩ちゃん
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

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

本書情報
出版社オライリージャパン
著者Dustin Boswell / Trevor Foucher
発売日2012/6/23
ページ数260ページ
レビュー
(Amazon)
(620件)
先輩くん
先輩くん
より良いコードを書きたい人におすすめの本だよ!
後輩ちゃん
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです!

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

<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』を追記します。

+81とは

+81は国際電話で日本の番号を表す国番号です。 日本国内での番号表記にするには「+81」を「0」に置き換える必要があるためaタグに設定する電話番号も頭文字を入力しません。

  • 080-1234-5678→+81-80-1234-5678
  • 03-1234-5678→+81-3-1234-5678

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

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()を使ってイベントをキャンセルします。

まとめ

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

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

復習ポイント

  • aタグにhref属性に『tel:電話番号』を設定することで電話発信できる
  • 国際電話に対応させるには『tel:+81-頭文字を抜いた電話番号』を設定する
  • スマホのみ電話発信させるにはCSSまたはJavaScriptを使うことで実現することができる

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

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村