ポートフォリオ・実績はこちら!!▶︎▶︎▶︎

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

HTML
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
スポンサーリンク
11月29日まで!!
Adobeの期間限定セール開催中

Web制作者に必須のAdobeのソフトをいますぐ手に入れよう!

セールの詳細はこちら!

HikoPro
HikoPro

こんにちは!大学生フリーランスエンジニアのHikoProです!

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

ネコ君
ネコ君

電話番号をクリックすると自動的に電話する事ができるんだね!

スポンサーリンク

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

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

090-1234-5678

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

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

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

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

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

  • 国番号を付ける場合はtel:の後に「tel:+81-090-1234-5678」と書く
  • ハイフンの有無はどちらでも良いがあった方がベター

ネコ君
ネコ君

aタグの使い方を理解してれば画像をクリックした際にも電話をかけれるようになるね!

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

090-1234-5678

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


ネコ君
ネコ君

PCから電話で問い合わせる事はほとんど無いね!

電話でお問い合わせをする際は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;

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

Hiko
Hiko

headタグにFontAwsomeのCDNを書くことをお忘れなく!

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タグを使って電話番号を発信させる方法まとめ

ネコ君
ネコ君

難しいと思ってたけど意外と簡単だね!

Hiko
Hiko

tel:だけはしっかり抑えておきましょう!

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

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

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

HikoPro
HikoPro

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

Twitterで記事の更新、フリーランスに関する情報を発信しているので、ぜひフォローお願いします!

スポンサーリンク
スポンサーリンク
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
HTML
HikoPro Blog

コメント

タイトルとURLをコピーしました