タップして電話を掛けられるようにしよう!!【a href="tel:"】

2024年1月21日

ニャンコ

htmlでボタンを押したら電話を掛けられるようにしたいよ～

aタグを使えば簡単に設定できるよ
メールについてもついでに解説するね

ワンコ

電話番号を設定

電話番号を設定するには、aタグの「href」属性に「tel:電話番号」を指定します。

<!-- tel:の後に続いて電話番号を設定 -->
<a href="tel:09011112222" class="tel">000-1111-2222</a>

これだけで、クリック、もしくはタップで電話がかけられるようになります。
電話だったら、各スマホの通話画面が開かれるかと思います。

ちなみに、「href」に設定する電話番号は、ハイフン（-）ありでもなしでも、大丈夫ですが、「ハイフン無し」が推奨のようです。
出来ればハイフンなしで設定しておいた方が良いでしょう。

PCでも、アプリやスマホとの連携などで電話を掛けることは可能ですが、基本的には電話を掛けるのはスマホがメインです。

PCの際はクリックしても反応しないようにすることも可能です。
リンクを設定している要素に、「pointer-events：none」を指定することで、クリックしてもイベントが発生しなくなります。

PC・スマホの判定は、今回は画面幅で行っています。
min-widthでPC幅の場合「pointer-events：none」を設定しています。

@media screen and (min-width: 801px) {
  .tel {
    pointer-events: none;
  }
}

aタグの「href」にメールアドレスを設定することもできます。
現在はフォームなどを使用することが多いため、あまり使う機会もなく非推奨ではありますが、知っていて損はないかと思います。

メールアドレスを設定するには、同じくaタグの「href」属性に「mailto:メールアドレス」を指定します。

<!-- mailto:の後に続いてメールアドレスを設定 -->
<a href="mailto:test@test.jp2">送信テスト！</a>

下記文字をクリックすると、各端末のメーラートが開いて、アドレスも設定されてると思います。

メールアドレスの後に「?」を付けて、指定することで「件名」、「本文」なども設定可能です。
複数の値を設定する場合は、「&（&）」で繋げていきます。

「subject」は件名、「body」は本文の設定です。

<!-- メールアドレスに続いて件名と本文を設定 -->
<a href="mailto:test@test.jp?subject=テスト件名&body=テスト本文">送信テスト！</a>

これで、メールの件名・本文が設定されます。

以上、電話番号、メールアドレスの設定でした。
メールアドレスについては、あまり使う機会がないかもしれませんが、電話番号については設定しておくとタップで簡単に電話が掛けれるためユーザビリティも向上し、問合せの件数も増えるかもしれません。

コーディングで電話番号が出てきたら、aタグを使用して電話を掛けられるようにしておきましょう。