HTMLでmailtoメールリンクを作成する方法をわかりやすく解説

今日は、HTMLでクリック可能なメールリンクを作成するという、Web制作において非常に役立つスキルの習得方法をご紹介します。

「えっ？HTMLでメールリンクを作る方法なんて今さら？1998年の話じゃあるまいし」と思った方もいるかもしれません。

いえ、決してそんなことはありません。ただ、メールリンクは最も基本的な形ではあまりにシンプルに書けてしまうため、経験豊富な開発者でもうっかり書き方を忘れてしまうことがあります（筆者もその一人です）。

mailtoリンクとは？

mailtoリンクとは、クリックすると訪問者のパソコンに設定されたデフォルトのメールソフト（WindowsならOutlookなど）が自動的に起動し、宛先が入力された新規メール作成画面を開くリンクのことです。

このmailtoリンクをHTMLで記述すると、次のようになります。

<a href="mailto:yourname@email.com">メールを送る</a>

通常のリンクとの違い

mailtoメールリンクは、通常のリンクとまったく同じコード構文を使います。つまり、アンカータグ <a> を使用します。

通常のリンクでは、href属性の中にURLのパスを記述しますね。

<a href="https://www.somewebsite.com"></a>

一方、mailtoリンクの場合は、href属性の中にメールアドレスを記述するだけです。

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

@email の部分は、@gmail や @hotmail など、お使いのメールサービスのドメインに自由に置き換えてください。

応用：件名や本文をあらかじめ指定する

mailtoリンクでは、URLパラメータを追加することで、件名（subject）や本文（body）、CCなどをあらかじめ入力した状態でメール画面を開くこともできます。

<a href="mailto:yourname@email.com?subject=お問い合わせ&body=ご記入ください">お問い合わせ</a>

複数のパラメータをつなぐ場合は ? の後に最初の項目を置き、以降は & で区切ります。日本語を含める場合は文字化けを防ぐため、URLエンコードを行うのが安全です。

まとめ

mailtoリンクの作り方は、通常のリンクと同じ <a> タグのhref属性に mailto: とメールアドレスを書くだけと非常にシンプルです。とはいえ、使う頻度が少ないと意外と忘れがちなテクニックでもあります。件名や本文の自動入力などの応用と合わせて、ぜひ活用してみてください。