【初心者でもわかる】タップしたら電話がかけられるようにする方法（レスポンシブ対応）

どうも7noteです。タップしたら電話がかけられるようにする方法。PCは反応させないようにします。

ヘッダーやフッターなどに電話番号を掲載した際に、タップで電話をかけられるようにする方法です。
お問い合わせ窓口のページなどにも使いますね。

実はけっこう簡単に実装することができるのですが、対策をしないとPCから見たときにも反応してしまうので、その対策方法も合わせて実装します。

ソース

index.html

<a href="tel:[phone]">000-1234-5678</a>   <!-- href属性に「tel:」と「電話番号」を記載する。 -->

style.css

/* 750px以上の幅（PC等）がある時だけ */
@media screen and (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;  /* カーソルイベントを無効 */
  }
}

解説

aタグのhref属性に、「tel:」と「電話番号」を書くことで動作します。
必ずaタグでなければいけない事と、番号の前に「tel:」をつける必要性があります。
「tel:」の後の電話番号はハイフン(-)ありでもなしでも動作するので好きな方が使えます。

スマホのみ対応にする方法

style.cssに書いているようにaタグのhref属性が「tel:」から始まるものは、pointer-events: none;で無効にすることができます。
@media screen and (min-width: 768px)の指定でPCにだけこれを無効にすることで、スマホからタップした時にだけ反応するようにできる仕組みです。

おまけ（国際電話の場合）

<a href="tel:[phone]">090-0000-0000</a>

国コードの入力が必要！！

参考：https://webliker.info/65145/

まとめ

簡単に実装できますし、aタグなのでテキストだけでなくボタンのようなデザインを作って「お電話はこちら！」というようなボタンにすることも可能です。
PCの時に誤ってクリックできてしまうと、無駄なアラートがでるのでしっかりと無効化の処理も忘れずに入れること！

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ