タブレットやスマホでタップした時のみ電話発信を有効にする方法【HTML・CSS】
ken-admin-suto
けんすと
いつも電話番号のハイフンを入れるか迷うんだけど・・・
電話番号のリンク(< a href=”tel:” >)(aタグ)をタップしたら電話をかけることができます。
電話番号のリンクを入力する際、ハイフンの有無で迷っている方が多いのではないでしょうか?
今回は、ハイフンの有無について下記にまとめました。
結論はどちらでもOKです。
1<!-- ハイフンなし -->
2<a href="tel:0300000000">03-0000-0000</a>
3
4<!-- ハイフンあり -->
5<a href="tel:03-0000-0000">03-0000-0000</a>
1<!-- ハイフンなし -->
2<a href="tel:09000000000">090-0000-0000</a>
3
4<!-- ハイフンあり -->
5<a href="tel:090-0000-0000">090-0000-0000</a>
1<!-- ハイフンなし -->
2<a href="tel:0120000000">0120-000-000</a>
3
4<!-- ハイフンあり -->
5<a href="tel:0120-000-000">0120-000-000</a>
ハイフンを入力する際は上記のように、ハイフンの位置に注意が必要です。
電話番号を入力する際は、半角での入力が必須。
1<!-- 半角 -->
2<a href="tel:03-0000-0000">03-0000-0000</a>
3
4<!-- 全角 (NG例) -->
5<a href="te l:03ー0000ー0000">03-0000-0000</a>
上記はやや大袈裟ですが、リンク内において稀に全角が混ざってしまう場合もあるので、全て半角で入力しましょう。
実際に電話がかかるかどうか、テストをするのが確実ですね!
以上になります。