HikoPro Blog

IT・テクノロジーで生活と仕事をもっと豊かに

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

約7分
About|HikoPro

About|HikoPro

1998年生まれ|ITライフクリエイター
Webクリエイター|YouTuber|Blogger

学生時代は、タイピングのテストでクラス最下位レベルのパソコン音痴。
もっと自分の市場価値を高めたいと思い、、、
▷バンコク不動産▷インドIT留学▷ベトナムIT企業エンジニアを経て
Web系のフリーランスとして独立。

その後もっと大きい市場でインパクトのあることをしたいと思い、
ITメガベンチャーに就職。

#GoProAwards受賞 #14ヵ国渡航 #Z大学創業者 #ネコ好き

YouTube

I make videos of computer hack information and useful applications that
enrich people's work and life.


PC Hack

Web Create

Life Style

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

こんにちは!大学生クリエイターでWebライター|エンジニア|YouTuberとして活動していますHikoProです! 最近は「若者のチャレンジを後押しするメディア」Z大学の編集長をしています!

今回はコーポレートサイトを作る際に必須となる、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送信、簡単なカスタマイズの方法をご紹介しました!

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

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

Leave A Reply

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)