【結論】<a href=’tel:01234567890′>012-3456-7890</a>
aタグに href="tel:電話番号" を指定すると、電話発信のリンクになります。href内にハイフンは不要です。
電話番号リンクをタップした時の挙動は機種によって異なります。iOSの場合は画面下部にポップアップが出現します。
PCでクリックした時にもリンクは発火し、FaceTimeなどの標準通話アプリケーションが立ち上がります。基本的にはスマートフォンなどのモバイルデバイスからの発信を想定しているため、PC表示ではリンクを無効化しておくのが一般的です。
PCでリンクを非アクティブにするには、メディアクエリを用いて以下のようにします。
@media screen and (min-width: 1024px) { a[href^="tel:"] { pointer-events: none; cursor: default; }
}a[href^="tel:"]セレクタを使用して、tel:から始まるhref属性を持つリンクを対象にしています。
pointer-events: none;は、要素に対するマウスイベントを無効化します。リンクをクリックしても反応しなくなります。
cursor: default;は、マウスカーソルのスタイルをデフォルトに設定します。これにより、電話発信用のリンク上では通常のポインターではなく、デフォルトのカーソルが表示されます。
iOSのSafariには、ページ内の電話番号を検出して自動的に発信用のリンクを付与する機能が備わっています。
これがなかなか無用なお節介で、郵便番号などの数字の羅列にも勝手に電話発信用リンクが付けられてしまいます。
いらんことすな！
意図せぬ電話発信やユーザビリティの低下につながるため、ページ内に郵便番号などの数字の羅列が含まれる場合はこの自動リンク機能を無効化しておきましょう。以下のコードをhead内に追加します。
<meta name="format-detection" content="telephone=no">以上、電話番号のリンクを設定する方法と注意点について解説しました。
