鶏口牛後な日々

魔法使い(なんでも作れるエンジニア)を目指してます。ブログは発散中

htmlのaタグをクリックして電話をかけたりメールを送ったりしたい

例えば病院のホームページなどで、電話番号が大きく記載されていて、そこをクリックすると実際に電話をかける機能が立ち上がるというのはよく見ますよね。

この機能は、HTMLのaタグでなされています。
電話は基本的にスマホ用の機能ですね。
(そのためPCのchromeなどのブラウザでは電話をかける機能がないため、エラーが出てしまうようです。これの対策については
https://www.genius-web.co.jp/blog/cat-85/tel.html こちらのサイトが詳しく対応を書いてくれているので参考にして下さい)


また、メールアドレスがリンクになっていて、これをポチッと押すとメールクライアントが立ち上がるというのもよく見ます。
これもまた、aタグの簡単な記載でできてしまうようです。


電話の場合
<p>電話番号:<a href="tel:0999999999">099-999-9999</a></p>


以下のように表示される↓

電話番号:099-999-9999


メールの場合
メールアドレス:<a href="mailto:example@mail.address">example@mail.address</a></p>


以下のように表示される↓
メールアドレス:example@mail.address


あーら簡単。
メールの方では、パソコンなどで、標準のメールクライアントが立ち上がるため、もしネットメールなどを使いたい場合でも、
標準のOutlookなどが立ち上がってしまい、ユーザーにとっては少しうざいと思われる可能性もあることを補足しておきます。


以上。