• メールアドレスにリンクを設定する
• 電話番号にリンクを設定する
• mailtoリンクの応用
• telリンクの応用
• セキュリティとスパム対策

メールアドレスにリンクを設定する

メールアドレスへのリンクを作成するには、mailto: スキームを使用します。

基本的な記述

次のように記述すると、ユーザーがリンクをクリックしたときに、メールソフトが開きます。

<a href="mailto:example@example.com">example@example.com</a>

表示例: example@example.com

電話番号にリンクを設定する

電話番号へのリンクを作成するには、tel: スキームを使用します。

基本的な記述

次のように記述すると、スマートフォンでは電話アプリが開きます。

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

表示例: 090-1234-5678

mailtoリンクの応用

件名を設定する

subject パラメータを使用して、デフォルトの件名を設定できます。

<a href="mailto:example@example.com?subject=お問い合わせ">メールを送る</a>

表示例: メールを送る

本文を設定する

body パラメータを使用すると、メールの本文にデフォルトのテキストを入力できます。

<a href="mailto:example@example.com?subject=お問い合わせ&body=お世話になっております。">メールを送る</a>

表示例: メールを送る

telリンクの応用

国番号を含める

国際電話をかける場合、電話番号の先頭に国番号をつけます。

<a href="tel:+81312345678">03-1234-5678</a>

表示例: 03-1234-5678

ハイフンなしで記述

一部のデバイスでは、ハイフンなしの形式の方が適切に動作する場合があります。

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

表示例: 03-1234-5678

セキュリティとスパム対策

メールアドレスのスパム対策

メールアドレスをHTMLに直接記述すると、スパムボットに収集されるリスクがあります。以下の対策が有効です。

JavaScriptを利用する

メールアドレスを直接記述せず、JavaScriptで動的に生成する方法があります。

<script>
    document.write('<a href="mailto:' + 'example' + '@' + 'example.com">メールを送る</a>');
    </script>

画像にする

メールアドレスを画像として表示し、テキストデータとして扱わない方法もあります。

電話番号の誤発信防止

電話リンクを誤クリックしないようにするために、onclick を利用して確認ダイアログを表示することも可能です。

<a href="tel:+819012345678" onclick="return confirm('この番号に電話をかけますか？');">090-1234-5678</a>

表示例: 090-1234-5678