HTML

aタグのhref=”tel:”のリンクで電話を発信させる方法【HTML】

最終更新日：2024-08-05

公開日：2024-07-24

記事内に広告が含まれています。

aタグのhref属性の値であるtel:(<a href=”tel:”>)を使用したリンクで電話を発信させる方法を紹介します。

aタグで電話発信させるために基本コード
国際電話の発信の場合
SP時のみ電話を発信(リンクを有効)にする場合
さいごに

aタグで電話発信させるために基本コード

まずはaタグで電話発信させるための基本的なコードです。

<a href="tel:090-1111-2222">090-1111-2222</a>

上記のようにhref属性にtel:半角数字で記述すると、クリック(タップ)で電話を発信させる事が出来ます。

ハイフンの有無について

aタグに記述する電話番号にハイフンは必要か不要か疑問があるかと思います。
他で紹介されているものは大体がハイフン無しとなっていますが、実はあっても無くてもどちらでも大丈夫です。自身もハイフンは記述しないのですが、今回は見やすくする為にハイフンを入れてます。

国際電話の発信の場合

国際電話の形式でtel:を設定する事で、日本以外から電話をかけた場合でも電話発信が可能になります。

<a href="tel:+81-90-1111-2222">+81-90-1111-2222</a>

上記のように、tel:国コード+電話番号の形式で記述します。

国コードについて

国コードとは、電話番号を国ごとに識別する為のコードとなります。
日本の場合は+81となり、電話番号の最初の「0」を+81に置き換えます。国コードの一覧はこちらのwikipediaより確認可能です。

SP時のみ電話を発信(リンクを有効)にする場合

コーディングをする際に、スマホの時だけ電話番号のリンクを有効したい場面がよくあります。
そんな時のやり方を2つ紹介します。

CSSで対応する場合

CSSで対応する場合は、メディアクエリを使用しSPサイズ以外ではリンクを無効化します。

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

上記の記述で、ブラウザ幅768px未満でリンクが有効になります。
厳密に言うとスマホかどうかは判別はできません。PCやiPadなどのタブレットもブラウザ幅が768px未満だとリンクが有効になります。

jQueryで対応する場合

jQueryで対応する場合はユーザーエージェントを取得し判別する方法があります。

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();
    });
}

上記の記述でユーザーエージェントを取得し、スマホ以外はリンククリック時のイベントを無効化しています。
クリック時以外でも、スマホ以外はクラス付与してCSSで対応するようにリンク自体を無効化してもいいと思います。

※参考記事
<a href=”tel:***”>リンクをスマートフォン端末以外では無効にする – Qiita

ユーザーエージェントについて

ユーザーエージェントは、ユーザーが使用しているデバイス・OS・ブラウザの情報の事をいいます。
これらの情報はユーザー側で変更可能となっており、100%合っているというわけではありません。
また、将来的にユーザーエージェントは廃止になるとも言われたりしています。使用する際はこれらの事も念頭においておく事が必要になります。