i-f – Web Works –

aタグのhref属性を使用して電話番号への発信リンクを設置する方法！

HTML

電話番号の記述に<a href=”tel:”></a>を利用して、電話番号への発信リンクを貼る方法を調べたので、備忘録として残しておきます。

PCでは、電話番号への発信リンクは無効にしたいので、その方法も載せておきます。

WEB上に電話番号の記載があったら、基本的にはaタグを使用して電話番号リンクを貼るのが一般的なようです。

この記事では・・・

  • aタグを使用した電話番号リンクを貼る方法
  • PCでは電話番号のリンクを無効にする方法

を記載しておきます。

目次

aタグへ電話番号リンクには、href属性を使用する。

電話番号に発信リンクを設置する場合は、href属性を使用します。
URLリンクを貼る時と同じです。

<a href="tel:09012345678">hoge</a>

これで、クリックもしくは、タップすると電話番号へ発信します。

  • href属性にtel:半角数字
  • <a>ここは画像でも、テキストでもOK</a>

電話番号のハイフンは必要？

090-1234-5678と「ハイフン」が入っていることが多いです。

href属性には、ハイフンを入れても機能します。

Googleで検索すると、ハイフンなしで記述しているサイトを多く見かけますが、肝心のGoogleデベロッパーズを見てみると、ハイフンありの例が表示されています。

国際電話番号の場合の設定方法。

国際電話の場合は、以下の通りに書き換えればOKです。

<a href="tel:+81-90-1234-5678">hoge</a>

分かりやすいようにハイフンを入れていますが、もちろんハイフンなしでも機能します。

  • tel:国際コード + 電話番号”

電話番号のリンクは、スマホのみ有効にしたい。

<a href=”tel”>を使用して、リンクを貼ることはできました。
ただ、このままではPCやタブレットでもクリックしたら、発信してしまいます。
別に発信してもいいんですが、不要な機能なので、スマホのでタップしたときのみにしたいですよね。

対応方法は、２つあるので記載しておきます。

CSSでスマホのみ有効にする方法。

CSSでスマホのみ有効にする方法は、以下の通りです。

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

bodyタグなどに設定しておけば、個別で指定する必要もないく、記述量も減らせます。

min-width: 799pxは、案件に応じて変更してください。

後述するJavaScriptの方法よりも簡単なのですが、pointer-events: none;がIE10以下未対応なので、どうしても対応させたい場合は、JavaScriptで対応するしかなくなります。

JavaScriptでスマホのみ有効にする方法。

次にJavaScriptを使用してスマホのみ有効にする方法を記載しておきます。

var ua = navigator.userAgent.toLowerCase();
var isMobile = /iphone/.test(ua)||/android(.+)?mobile/.test(ua);
 
if (!isMobile) {
    $('a[href^="tel:"]').on('click', function(e) {
        e.preventDefault();
    });
}

この記述は、以下のサイトを参考にさせていただきました。

OTAMUNOT

詳しい内容は、上記の記事をどうぞ。

電話番号へ発信ではなく、SMS発信にすることもできる。

ここまでは、電話番号への発信について記述してきましたが、電話番号へ発信ではなくて、SMS送信にしたいときもありますよね。

SMS送信したいときは、以下のように記述を変えます。

iOS
<a href="sms:09012345678&body=ここにメッセージ">SMSで送信する</a>

Andoroid
<a href="sms:09012345678?body=ここにメッセージ">SMSで送信する</a>
  • &body=の部分にデフォルトのメッセージを記述できます。
  • 「SMSで送信する」の部分は、画像でもテキストでもOKです。

注意点としては、「&body=」の部分がiOSとAndroidで記述が違います。
どちらにも対応させるには、PHPなどを使用して、アクセスしている端末を識別して、出力の内容を分ける必要があります。

SafariやEdgeで電話番号に勝手にリンクがついてしまう問題。

SafariとEdgeでは、WEBサイト上に記載されている番号が、電話番号と認識されると勝手にリンクが貼られてしまいます。

（本当、Safariってめんどくさい・・・）

基本的には、勝手にリンクになっても問題ないのですが、前述したようにPCでもリンクが機能します。

（勝手につけるなら、リンクを有効にするのはスマホだけにしとけよ。って思いますが）

そんな時は、head内に以下のように記述してください。

<head>
  meta name="format-detection" content="telephone=no"
</head>

これで、自動リンクを無効にできます。

まとめ

<a href=”tel:”></a>を使用して電話番号への発信リンクを設置する方法をご紹介しました。

記述は複雑ではないですが、PCの時に無効にすることを忘れないようにしてあげてください。
たまーに、PCでも機能しているリンクを見かけますが、やはり必要ないと思うので無効にしてあげるのがいいと思います。

（私は、就職したばかりのころは、無効にし忘れて何度が指摘をうけましたw）