今回は、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以上で、電話番号リンクは無効
