タップで電話・メール・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:送信先のメールアドレスですね。

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

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

こういう書き方です。

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

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

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

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

オススメの理由：

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

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

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

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

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

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

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