実行できるHTMLドキュメント: メールリンク mailto

Q: HTML でメールリンクを作るには？

href が mailto: とアドレスで始まるリンクを使います: hello@example.com 。クリックすると、読み手の既定のメールアプリで新規メッセージが開きます。

Q: mailto リンクに件名を付けるには？

? の後にクエリパラメータとして追加します: mailto:hello@example.com?subject=Order%20question。空白は %20 にエンコードし、パラメータを増やすときは ?subject=Hi&body=Hello のように & でつなぎます。

Q: mailto リンクで複数の宛先に送るには？

アドレスをカンマで区切ります: mailto:ana@example.com,bob@example.com。コピーには cc= と bcc= パラメータを使います: mailto:ana@example.com?cc=bob@example.com&bcc=cy@example.com。

Q: HTML で電話番号をタップできるようにするには？

番号を国際形式で書いた tel: リンクを使います: +1 555 123 4567 。スマートフォンでは電話がかかり、パソコンでは通話アプリがインストールされていればそれが開きます。

メールリンクの作り方

リンクの href を mailto: とアドレスで始めます。クリックすると、読み手のメールアプリでそのアドレス宛ての新規メッセージが開きます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Email link</title>
</head>
<body>
  <p>Questions? Write to <a href="mailto:hello@example.com">hello@example.com</a>.</p>
  <p>Or call <a href="tel:+15551234567">+1 555 123 4567</a>.</p>
</body>
</html>

プレビューは他のアプリを開きません。ここでリンクをクリックすると、そのリンクが開くアドレスが表示されます。実際のページでは、1 つ目は新規メールを開き、2 つ目はスマートフォンで電話をかけます。

アドレスそのものをリンクテキストにしましょう。メールアプリを設定していない読み手 (ブラウザで Web メールを使うパソコンではよくあります) でもコピーできます。「メールを送る」とだけ書かれたリンクでは、読み手は手詰まりになります。

件名、本文、cc、bcc

mailto リンクではメッセージの他の部分も入力できます。URL のクエリ文字列と同じように、? の後にパラメータを追加し、& でつなぎます。

パラメータ	入力される部分	例
`subject`	件名	`?subject=Order%20question`
`body`	本文	`&body=Hi%20there`
`cc`	CC の宛先	`&cc=sales@example.com`
`bcc`	BCC の宛先	`&bcc=log@example.com`

複数の宛先はアドレスの部分にカンマ区切りで書きます: mailto:ana@example.com,bob@example.com。

値は URL エンコードする必要があります。空白は %20、改行は %0D%0A、& は %26、? は %3F です。この例のスクリプトは各リンクをデコードし、メールアプリが受け取る内容を表示します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mailto parameters</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <a href="mailto:support@example.com?subject=Order%20%23123&body=Hi%2C%0D%0AMy%20order%20has%20not%20arrived.">Report a problem</a>
  <br>
  <a href="mailto:ana@example.com,bob@example.com?cc=boss@example.com&subject=Q3%20plan">Email the team</a>

  <pre id="out"></pre>

  <script>
    const out = document.querySelector('#out');
    for (const a of document.querySelectorAll('a')) {
      const [to, query] = a.getAttribute('href').slice(7).split('?');
      out.textContent += 'To: ' + to + '\n';
      for (const [key, value] of new URLSearchParams(query)) {
        out.textContent += key + ': ' + value + '\n';
      }
      out.textContent += '\n';
    }
  </script>
</body>
</html>

件名 Order #123 は Order%20%23123 と書く必要があります。# をそのまま書くと URL がそこで終わり、本文が失われます。空白に + を使うのもやめましょう。mailto リンクでは + は文字どおりのプラス記号で、多くのメールアプリでそのまま表示されます。

JavaScript で mailto リンクを組み立てる

手作業のエンコードは間違いが起きやすいものです。encodeURIComponent が代わりにやってくれます。入力欄に入力すると、下のリンクが更新されます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mailto builder</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 8px; }
    input, textarea { display: block; width: 100%; max-width: 360px; font: inherit; }
    code { display: block; background: #e5e7eb; padding: 8px; word-break: break-all; }
  </style>
</head>
<body>
  <label>To <input id="to" value="hello@example.com"></label>
  <label>Subject <input id="subject" value="Question & feedback"></label>
  <label>Body <textarea id="body" rows="3">Hi,
I have a question.</textarea></label>

  <p><a id="link">Open in mail app</a></p>
  <code id="href"></code>

  <script>
    const fields = ['to', 'subject', 'body'].map((id) => document.getElementById(id));
    const update = () => {
      const [to, subject, body] = fields.map((f) => f.value);
      const href = 'mailto:' + to +
        '?subject=' + encodeURIComponent(subject) +
        '&body=' + encodeURIComponent(body.replace(/\r?\n/g, '\r\n'));
      document.getElementById('link').href = href;
      document.getElementById('href').textContent = href;
    };
    fields.forEach((f) => f.addEventListener('input', update));
    update();
  </script>
</body>
</html>

encodeURIComponent は & を %26 に、改行を %0A に変換します。replace で改行をメールが想定する %0D%0A の組にしています。アドレスの部分は入力したままにしましょう。そこでは @ と , はエンコードせずに使えます。

tel: と sms: の電話リンク

tel: はタップで電話をかけるリンクを作ります。href には国番号付きで空白なしの番号を書き、表示するテキストは好きな形式で構いません。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contact links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .contact { display: flex; flex-wrap: wrap; gap: 8px; }
    .contact a {
      padding: 10px 14px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      color: #111827;
      text-decoration: none;
    }
    .contact a:hover { border-color: #2563eb; }
  </style>
</head>
<body>
  <div class="contact">
    <a href="tel:+442079460958">Call +44 20 7946 0958</a>
    <a href="sms:+15551234567">Text +1 555 123 4567</a>
    <a href="mailto:hello@example.com">hello@example.com</a>
  </div>
</body>
</html>

tel:+442079460958 はどの国からでも使えます。tel:02079460958 のような国内の番号は、その国の中からしかかけられません。
区切りにハイフンは使えます (tel:+1-555-123-4567)。空白は形式に含まれないので、href には入れないでください。
sms: はメッセージアプリを開きます。?body= でメッセージを入れる方法は多くのアプリで使えますが、対応がまちまちなので頼らないようにしましょう。
パソコンでは、tel: は通話アプリ (FaceTime やソフトフォンなど) がインストールされていればそれを開き、なければ何もしません。

iPhone の Safari は、普通のテキストの電話番号を自動でリンクにします。注文番号などがそれで崩れる場合は、<meta name="format-detection" content="telephone=no"> で無効にしましょう。

スパムとメールアドレス

mailto リンクのアドレスは、ページをダウンロードするボットなら誰でも読めます。hello [at] example [dot] com と書いたり JavaScript でアドレスを組み立てたりする工夫で単純な収集ツールは防げますが、リンクも使いにくくなります。HTML のフォームで解説している問い合わせフォームなら、アドレスをページに一切載せずに済みます。多くのサイトでは、受信箱に優れたスパムフィルターを付けるほうが簡単な解決策です。

<form action="mailto:..."> は避けましょう。読み手のメールアプリに依存し、入力内容が読みにくい URL エンコードの形で送られ、送信されたかどうかも確認できません。

よくある間違い

mailto: を忘れる。 href="hello@example.com" は、アドレスと同じ名前のページへの相対リンクになります。
件名や本文の空白や # をエンコードしない。 値は %20、%23、または encodeURIComponent でエンコードしましょう。
空白に + を使う。 プラス記号として表示されます。
& の代わりに 2 つ目の ? を使う。 ? の後に続くのは最初のパラメータだけで、残りは & でつなぎます。
テキストが「メールを送る」だけ。 Web メールの利用者がコピーできるものが残りません。
tel: に国内の電話番号を書く。 国番号を含めましょう。

よくある質問

HTML でメールリンクを作るには？

href が mailto: とアドレスで始まるリンクを使います: <a href="mailto:hello@example.com">hello@example.com</a>。クリックすると、読み手の既定のメールアプリで新規メッセージが開きます。

mailto リンクに件名を付けるには？

? の後にクエリパラメータとして追加します: mailto:hello@example.com?subject=Order%20question。空白は %20 にエンコードし、パラメータを増やすときは ?subject=Hi&body=Hello のように & でつなぎます。

mailto リンクで複数の宛先に送るには？

アドレスをカンマで区切ります: mailto:ana@example.com,bob@example.com。コピーには cc= と bcc= パラメータを使います: mailto:ana@example.com?cc=bob@example.com&bcc=cy@example.com。

HTML で電話番号をタップできるようにするには？

番号を国際形式で書いた tel: リンクを使います: <a href="tel:+15551234567">+1 555 123 4567</a>。スマートフォンでは電話がかかり、パソコンでは通話アプリがインストールされていればそれが開きます。

mailto リンクをクリックしても何も起きないのはなぜですか？

リンクは既定のメールアプリにアドレスを渡すだけです。Web メールを使うパソコンではよくあることですが、読み手がメールアプリを設定していないと、役に立つことは何も起きません。コピーできるように、アドレスをリンクテキストとして表示しましょう。