【HTML】電話番号のリンクをタップして発信させる方法

2021年1月6日 2021年1月6日

こんにちは！CodeClub965のKです！

今回は、よく飲食店などのホームページで電話番号をタップすると電話発信されると思いますが、その方法について紹介したいと思います。

特に難しい内容ではありませんが、意外と使う場面があるかもしれないので記事にしておこうと思いました。

電話番号のリンクから発信させる方法

まずは一番シンプルな方法です。

発信させたい電話番号に対して以下の構文を入れるだけで実装できます。

<a href="tel:電話番号">電話番号</a>

実際にコード例をみてみましょう。

<body>
  <p>電話番号をクリック</p>
  <a href="tel:000-0000-0000">000-0000-0000</a>
</body>

電話番号をクリックすると発進：000-0000-0000

電話番号をクリックすると発進しようとするのが分かると思います。
簡単ですね！

ちなみに、<a>~</a>の中はテキストでも画像でも大丈夫です。

補足ではありますが、国際電話の形式で電話番号を設定する方法についても書いておきます。
設定することで、ユーザーが日本以外から電話をかけた場合でも電話発信をさせることができるようになります。

方法としては簡単で上記の構文に対して国コードを入れるだけです。

<a href="tel:国コード + 電話番号">電話番号</a>

一応コード例も書いておきますね。

<body>
  <p>電話番号をクリック</p>
  <a href="tel:+81-80-0000-0000">080-0000-0000</a>
</body>

国コードってなんやねん！という方もいると思うので簡単に説明すると、国コードは電話番号を国ごとに識別するためのコードのことです。

上の例では、日本の電話番号であれば、番号の最初の 0 を「+81」に置き換えることで対応できます。

国コードが分からないという方も、「国際電話番号変換」などで調べれば記載したい電話番号を変換してくれるサイト結構あるので使ってみるといいと思います！

特に考えなしに電話発信をしたい場合は上記の実装で問題ありませんが、上記の場合だとPCでもスマホでも両方で電話発信することができます。

実際PCから電話かける人なんてほぼいないですよね？笑
大抵がスマホから電話をかけると思うので、スマホ表示の時だけ電話発信を有効にしておきたいという場合もあると思います。

その方法についても紹介しようと思いますが、その方法については次回の記事でまとめたいと思います。

ちなみに以下の2種類の方法を紹介しようと思います。

・CSSで対応する方法
・JavaScriptで対応する方法

次回の記事も読んでいただけると嬉しいです！

それでは、また！

Follow me!