HTMLのaタグで電話がかけられるリンクを作成する

最近になって知ったのですがHTMLのaタグは電話がかけられるリンクを作成することができるのです。

HTMLのaタグで何かしらのウェブページをリンクするときにはhref属性の値にページURLを指定しますが、電話がかけられるリンクを作成する場合には、aタグのhref属性値にリンクしたい電話番号を指定するのです。

最近になって知ったHTMLのaタグで電話がかけられるリンク作成なので、勉強を兼ねて、基本的な作成をしてからリンクの無効化、さらには電話番号のリンクをスマホのみ表示できるように作成してみました。

1. HTMLのa href=telで電話番号をリンク
2. 電話がかけられるリンクを無効化してみる
3. HTMLで電話番号のリンクをスマホのみ表示

HTMLのa href=telで電話番号をリンク

HTMLのaタグで電話がかけられるリンクを作成するときには、HTMLのa開始タグにhref属性を記述してhref属性値にはtel:を記述して電話番号を指定します。

電話番号のリンクを作成したaタグの記述例は以下です。

<a href="tel:0120-000-000" class="tel-link">電話でお問い合わせ</a>

ウェブページをリンクするときと同じようにa開始タグとa終了タグをマークアップしてa要素を作成し、a開始タグをa href=tel:の形式で記述します。

a href=tel:のtel:にはaタグでリンクしたい電話番号を指定します。

リンクしたい電話番号の指定方法はハイフンあり、なしのどちらでも大丈夫です。

そしてリンクテキストを「電話でお問い合わせ」のように記述しておきます。

HTMLのa href=telで電話番号をリンクすると、以下の画像のように表示することができます。CSSでボタンにしています。

a href=telで電話番号をリンクしているボタンですので、スマホで電話ボタンをタップするとスマホの画面下部には電話発信のポップアップが登場します。

登場した電話発信のポップアップで発信の右横にa href=telで指定した電話番号が表示されていれば、HTMLのaタグで電話がかけられるリンクを作成するのが成功しています。

HTMLのa href=telで電話番号をリンクすると、スマホでは電話番号をタップすることで、a href=telで指定した電話番号に発信することができますが、PCでは上の画像のようにMacならFaceTimeの使用を促されれるポップアップが表示します。

サイトによりけりですが、おそらくHTMLのaタグで電話がかけられるリンクを作成するのはスマホのみで良い場合が多いかもしれません。

電話がかけられるリンクを無効化してみる

HTMLのaタグで電話がかけられるリンクを作成するのをスマホのみにして、PCでは電話番号をリンクさせないようにしたいと思った私は、電話がかけられるリンクを無効化してみることにしました。

そのために最初に思いついたのが、CSSのメディアクエリでブレイクポイントを決めてマウスポインターの操作を無効化することです。

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

CSSのメディアクエリで電話がかけられるリンクを無効化するブレイクポイントを決めてa[href^=”tel:”]のセレクタを作成してからpointer-events: noneを指定します。

HTMLのa href=telで電話がかけられるリンクを作成していますので、a[href^=”tel:”]のCSS属性セレクタ内に書いたpointer-events: none;は、ブレイクポイントmin-width: 800px以上の画面幅のときには、電話がかけられるリンクが無効化されます。

電話がかけられるリンクを無効化することには成功しますが、気づいたことが…

HTMLのa href=telで電話番号をリンクしたボタン自体は表示しているからPCの画面幅をブレイクポイントの幅より狭くした場合は、電話がかけられるリンクの無効化はできていないことに。

それならいっそのことHTMLで電話番号のリンクをスマホのみ表示できるようにできないかと試行錯誤することになるのです。

HTMLで電話番号のリンクをスマホのみ表示

jqueryと組み合わせてHTMLのaタグで電話がかけられるリンクを作成すると、HTMLで電話番号のリンクをスマホのみ表示することができます。

PCの場合、お問い合わせボタンでフォームのページに移動するように作成。
スマホの場合、電話ボタンとお問い合わせボタンを表示し選択可能に作成。

上記の2つの処理をjqueryで条件分岐することでPCとスマホで表示するボタンを切り替え、電話番号のリンクはスマホのみで表示します。

jquetyは勉強不足なので実際に動作したコードを元に分かる範囲で説明します…

<div id="device" class="btn-wrapper"></div>

<script>
    function device() {
        var ua = navigator.userAgent;
        if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){
            return '<a href="tel:0120-000-000" class="tel-link">電話でお問い合わせ</a><a href="#" class="pc-link">お問い合わせ</a>';
        }else{
            return '<a href="#" class="pc-link">お問い合わせ</a>';
        }
    }

    window.onload = function() {
        document.getElementById("device").innerHTML = device();
    }
</script>

まずHTMLのdiv要素をマークアップしてid属性を付与しておきます。

次にif文の式を作成します。

ifの式が電話番号のリンクをスマホのみ表示できるようにデバイス判定をしているのですが、判定はUserAgent(ユーザーエージェント)を識別して判定できるように式を書きます。

Webページのリクエスト時にサーバー側に送信される情報には、利用しているデバイス（PCとかスマホ）によって異なる、UserAgentと呼ばれるデータが一緒に送信されるようなのですね。

それを利用してスマホ判定を行い、HTMLのa href=”tel:で作成する電話番号のリンクをif内のreturnで記述してスマホのみ表示できるようにしています。

returnで返ってくるaタグのリンク要素は、スマホのときはif内にHTMLのaタグで電話がかけられるリンクと、問合せページへ遷移するaタグの2つの要素を作成しておきます。

スマホ以外はelse内のreturnでPCの場合として、問合せページへ遷移するaタグのリンク要素が返るように作成です。