HTMLでメールアドレスをリンクにする方法を解説！

HTMLでメールアドレスをリンクにして、お問い合わせ内容を自分のメールアドレス先に送ってもらいたい時などリンクからメーラが立ち上がりすぐにメールを送れるようにする方法を知っておくと便利です。

では以下の項目でHTMLでメールアドレスをリンクにする方法について紹介します。

ここでは、HTMLでテキストをメールリンクにする方法について解説します。

HTMLでメールアドレスをリンクにするにはmailtoを用います。

では実際にサンプルコードを用いて挙動を見てみましょう。

メールアドレスのリンクをクリックしていただくと、以下の画像のように私の環境ではメーラーがGmailだったので、Gmailからメールを送信できるようになっていることが分かります。

ではサンプルコードの解説を行います。

まずa要素のhref属性にmailto:メールアドレスという形式で記述します。これだけで簡単にメールアドレスをリンクにすることができます。

そしてa要素の中にメールアドレスを設定します。

mailto:メールアドレスの後に?でパラメータ追記することで様々な設定が可能です。

?の後ろには以下のような設定が可能です。

・件名・・・subject=件名
・本文・・・body=本文のテキスト
・CC・・・cc=info@one.com
・BCC・・・bcc=info@one.com

また複数設定する時は&を用いて、例えば件名と本文を設定する時は、
subject=件名&body=本文のテキストと記述します。

では件名と本文を設定したサンプルコードを用いて、挙動を確認してみましょう。

メールアドレスをクリックしていただくと、件名の欄に「用件」、本文を記載する欄に「本文を記載します」と既に埋まっていることが分かります。

いかがでしたでしょうか？

今回紹介したHTMLでメールアドレスをリンクにする方法は主に、ポートフォリオで連絡手段を設定する時に使えるでしょう。

是非ともご自身のポートフォリオに使ってみてください。