今回は、HTMLで電話番号のリンクを設定する方法を紹介します。

電話番号のリンクを設定するとどうなる？

リンクを設定した場所をタップするだけで直接電話を発信することができるようになるため、ユーザーにとって使いやすいサイトになります。

電話番号のリンク設定方法は？

設定は簡単です。［a href=””］に［tel:］を入れるだけです。

※番号は任意の番号を入れてください。ハイフンはなしでもOKです。

HTMLはこちら

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

こちらが実装例です。

See the Pen
Untitled by 林 (@hayashi-akina)
on CodePen.

実装例の［Result］の中の番号をクリックすると、PCでは［次を使って電話］［アプリの選択］等が表示されます。

ただ、電話をかけるのはほとんどがスマートフォンからで、PCでの設定は不要といえます。

スマートフォン、タブレットのみ設定する場合は、以下のCSSも追加してください。

@media (min-width: 751px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
}

設定の内容は以下の通りです。

• 横幅が751px以内で、電話番号リンクが有効
• 横幅が751px以上で、電話番号リンクは無効

Webデザイナー / コーダーのみなさまへ

株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。

サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。

>> バックエンドについて、オートプロジェクトに問い合わせをする