便利？電話番号にリンクが付く
スマートフォンでホームページを見ると電話番号にリンクが付きますね。そのままタップすれば電話をかけることができるので、便利な機能です。
この機能はスマートフォンのブラウザが、電話番号と思われる数列を予想してa要素を使ってリンクを付けています。
おぉスマートな機能だな！と関心しそうになりますが、よく確認してみるとFAX番号や住所、郵便番号までもが電話番号と誤認識されているケースもあります。すこしばかり残念な機能ですね・・・
これではページを見てくれた方にとって不親切です。
インターネット上にある電話番号と一致する数列を拾ってくれればいいのに・・・とか考えてしまいますが、もしそうなるとすると、ページの表示に時間がかかりすぎるかもしれないので現実的ではなさそうですね・・・ブラウザへの負担も相当なものになりそうです。
せめてhead内に電話番号と認識する数列を書いて、その数列だけを電話番号と認識させる。くらいの機能はあってもいいのかもしれませんが、こちらもブラウザへの負担がかかりすぎてしまって、フリーズする・・・ということも予想されます。
自動でリンクが付くと、見た目上も変
電話番号を拾い、自動でリンクを付ける機能。
これはHTMLの構造に関係なく、ブラウザがa要素を付けています。なのでa要素のCSSが適応されます。
デフォルトであれば、文章中に突然アンダーバーが入って、青文字に変わってしまうという訳です。
機能的には問題ナシですが、ページの見た目上では問題アリですね。
リンクテキストである事を知らせるには、本文とは異なる文字色や装飾を施して差別化しなければわかりにくいので仕方ないですが、思ってもみない所で見た目が変わってしまうとものすごく違和感が出てしまいます。
また、a要素を無理やり差し込んでいるので、a要素用のCSSが適応されてしまい、レイアウトが崩れてしまう事もあります。
こういった動作も含めてデザインできればいいのですが、レスポンシブWEBデザインで作る場合にはなかなか難しい部分があります。
またFAXや意図しない部分がリンクテキストになってしまう事もあるので、機能をOFFにして、任意の箇所へ手動でつけてみてください。
自動でリンクを付ける機能はOFFにできる
電話番号を認識してリンクを付ける機能はmeta要素でOFFにすることができます。
<meta name=”format-detection” content=”telephone=no”>こんな感じでhead要素にいれちゃいましょう。
その後、リンクを付けたい位置へ電話番号リンクを設置すれば、制作者の意図通りにホームページをデザインできますね。
ちなみに電話番号リンクは<a href=”tel:ここに電話番号が入ります”><a>です。
a要素なので、もちろん画像に設定する事もできますよ！
レスポンシブWEBデザインへの対応について
レスポンシブWEBデザインは、同一のHTMLを使って、PC・タブレット・スマートフォンへ対応しています。
なので電話番号にa要素を使ってリンクを付けると、問題が起こりますね。
そう、パソコンでも電話番号の部分がリンクテキストになってしまいます。
今のところ、パソコンやタブレットに通話機能が標準で入っていません。なのでリンクをクリック（タップ）しても、何も動作してくれないので、ページを見ていて不審に思ってしまいます。
こういったことに対応するために、電話番号へリンクを設置するのではなく、電話をかけるボタンを作成して、スマートフォンの時だけ表示させてみてはどうでしょうか
これで各段に使い勝手が良くなりそうですね。
PCでもEdgeで見ると電話番号がリンクになっている
Windows10から標準でインストールされているブラウザ「Edge」
このブラウザでホームページを見ると、電話番号をリンクテキストに変身させてくれます。
パソコンで見ていても、電話番号がクリックできるテキストに変わっているので、見ていて少しばかり違和感があります。
スマートフォン専用にページを作り分けたから、PC用は大丈夫！とはなりませんね。
PC用のページにもきちんと自動で電話番号をリンクテキストに変換する機能をOFFにして、見た目を整えていきましょう。
まとめ
・電話番号のリンクはブラウザが自動で行う
・meta要素を使って機能をOFFにできる
・PCを使って閲覧していても、Edgeを使うと電話番号がリンクテキストになる
