タップで電話・メール・SMSにリンクするHTML

スマホをタップして、電話発信ができるようにするHTMLの書き方です。メール送信、SMS送信もできます。

電話番号リンク

<a href="tel:090-1234-5678">090-1234-5678</a>

解説

• 赤線部分‥発信したい電話番号を書きます。ハイフンは有り無しどちらでも大丈夫です。
• 青線部分‥画面上に表示されるリンクの文字です。

aタグという、ふつうのリンク文字を作るタグですね。リンク先をURLではなく、tel:発信先の電話番号と書くだけです。

同じ要領で、メールやSMS（携帯ショートメール）がタップ（クリック）で送れるリンクも作れます。

メール送信リンク

<a href=”mailto:info@sample.com”>
info@sample.com
</a>

と書きます。

mailto:送信先のメールアドレスですね。

ここを押すとメールソフトが立ち上がり、リンク先のメールアドレスがあらかじめ宛名に入力された新規メール作成画面が表示されます。

SMS（携帯ショートメール）送信リンク

<a href="sms:090-1234-5678">SMSを送信</a>

こういう書き方です。

mailto:送信先の携帯電話番号で、SMSアプリに飛びます。

広告

メールリンク作成の注意点

mailto:は、じつはあまりオススメではない機能とされています。

理由は、スパム（迷惑）メールの格好の標的になってしまうからなんですね。インターネット上で公開されているメールアドレスをロボットが自動収集して、スパムメールの送信リストに加えられてしまいます。

お問い合わせメールフォームがオススメ

メールでの連絡窓口を設けたいときは、お問い合わせメールフォームがオススメです。

こういったものですね→当サイトのお問い合わせページ

オススメの理由：

• 直にメール送信リンクを貼るよりセキュリティが高い
• ユーザーに優しい。真っさらの新規メール画面に書くよりも、名前・メールアドレス・用件項目‥型を作って指示してあげたほうが入力しやすいです。

メールフォーム作成サービスを活用しよう

メールフォームはプログラムを書いて設置するものですが、今では無料で使えるメールフォーム作成サービスもありますので、そちらを使うのがラクですし良いですね。

ガチガチ見た目にこだわらなければGoogleフォームがありますし、WordPressで作られたサイトならContact Form 7プラグインが有名です。（当サイトもContact Form 7を使っています）

またformrunというサービスなら作成〜サイト設置まで簡単にできるのに加え、自動返信サンクスメールや郵便番号からの住所自動入力機能、管理画面から問い合わせ履歴の管理などなど‥便利な機能がたくさんあります。

広告

おまけ〜ボタン風リンクのデザインサンプル

ただの文字よりクリックしてもらいやすくなる、ボタン風デザインのCSSサンプルを作ってみました。スタンダードなやつです。よろしければ使ってください。

HTML

まず、HTMLにはこう書きます。リンクを意味するhref=””のあとに、CSSと紐付けるクラス名（今回はclass=”contactBtn”としてみました）を追加します。

CSS

class=”contactBtn”に当てたCSSがこちらです。

色をはじめ、お好みで変えやすい箇所にはコメントを振ってますのでサイトに合わせていじってみてください。