HTML/CSS

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

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

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

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

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

動画情報
作成者たにぐち まこと
学習時間9時間
受講者数43,706人
レビュー (9,232件)
動画の詳細はこちら

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

<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アクセスランキング にほんブログ村