今回は、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;
}
}設定の内容は以下の通りです。
株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。
サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。
