今回はコーポレートサイトを作る際に必須となる、HTMLで電話番号を発信させる方法のご紹介をします！

HTMLで電話発信させる基本的なコード

例えばこちらの電話番号をクリックしてみて下さい！

090-1234-5678

お使いのブラウザによって挙動は異なりますが、電話をするとかFacetimeを開始するなど何かしら電話をする動きがあったかと思います！

<a href="tel:090-1234-5678">090-1234-5678</a>

HTMLではこのようにaタグを使用し、hrefの中にtel:〇〇〇-〇〇〇-〇〇〇を書くことによって電話番号発信をする事ができます！

アンカータグ（aタグ）の基本的な使い方はこちら

ポイントはhrefの中にtel:と書き、その後に発信させたい電話番号を書きます。

PCでは電話を発信しないようにするテクニック

090-1234-5678

PCのChromeブラウザでこの電話番号をクリックすると、このようにFaceTimeを開くかのモーダルウィンドウが表示されます。

電話でお問い合わせをする際はPCのFacetimeでする事はほぼなく、ほとんどの方がスマホ端末で電話するかと思います。

なのでPCのブラウザで電話番号を押しても何も挙動しないようにするのが、ユーザーにとっても運営側にとっても利便性の高いサイトと言えるでしょう！

CCSでブラウザ幅によって挙動を変える

どう言うことか詳しく説明すると、PCの画面サイズでは電話番号をクリックしても何も起こらないが、画面幅を414px（iPhone6/7/8plusの画面幅）を下回ると電話をかけれるようにすると言うことです。

CSSの@mediaを使用すれば簡単に実装できてしまいます。

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

このCSSコードの意味は、414px以上の画面幅ではpointer-events（ポインターをかざした時の動作）を無効にしてね！と言う意味になります。

画面幅は自分のお好みに変えて実装してみて下さい！

Javascriptでデバイスを識別し挙動を変える

次に画面幅に依存せず、Javascriptでユーザーが使っているデバイスを識別し、デバイス毎に電話をかけるか否かの挙動を変更する方法です。

つまり簡単に言うと、

• iPhone,Androidを使用中→電話をかけれる
• それ以外→電話かけれない

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

こちらはQiitaの<a href=”tel:***”>リンクをスマートフォン端末以外では無効にする記事を参考にしております。

このコードを解説すると、ユーザーのデバイスを識別しスマートフォン以外の場合tel: リンククリック時のイベントを無効化しています。

a[href^="tel:"] {
 cursor: default;
 }

このCSSも同時に適用させることによって、電話番号にカーソルを合わせても指マークに変わらないのでユーザにリンクでは無い事が伝わりより利便性の高いサイトになります！

電話番号先にSMS（ショートメッセージ）を送信するHTML

090-1234-5678にSMSを送信する

↑このリンクをクリックするとメッセージアプリに移動するかと思います。

<a href="sms:090-1234-5678">090-1234-5678にSMSを送信する</a>

HTMLソースコードはこのようにtel: →sms: と変えてあげるだけで簡単に実装できます！

WeblikerさんのHTMLの<a href=”tel:”>でリンクをタップして電話を発信させる方法の記事を参考にしました。

CSSを使っておしゃれな電話番号ボタンを作る

ただ数字が並んだ電話番号では何だか味気ないので、、、

090-1234-5678

このようなボタンの作り方をご紹介します！

1.FontAwsomeを使う

<a href="tel:090-1234-5678" class="tel"><i class="fas fa-phone"></i>090-1234-5678</a>

.tel{
background:red;
color:white;
padding:10px 17px;
border-radius:15px;
text-decoration:none;
}
.tel:hover{
color:white;
opacity:0.7;

このようにアイコン番号の前に配置してあげれば電話番号と言うのが一目で分かりますね！

2.画像を使う

FontAwsomeに依存せず好きな画像を使っておしゃれな電話番号ボタンを作る際は下記のようなコードを書きます！

<a href="tel:090-1234-5678" class="tel">090-1234-5678</a>

.tel{
background:red;
color:white;
padding:10px 17px;
border-radius:15px;
text-decoration:none;
}
.tel:before{
  content: "";
  background: url(img/sample.png);
  background-size: contain;
  width: 15px;
  height: 15px;
  padding-right:5px;
}

CSSの擬似要素を使ってあげれば簡単に実装できます！

HTMLでaタグを使って電話番号を発信させる方法まとめ

HTMLで電話発信する方法とSMS送信、簡単なカスタマイズの方法をご紹介しました！

コーポレートサイトを作る際には必ず必要になる技術なので、いつでも使えるように覚えておきましょう！

最後までご覧いただきありがとうございました！