HTMLでメールアドレスを開くリンクを作成する方法

普通リンクというとURLを開くのに使われるのがほとんどです。

しかしメールアドレスを指定すればメールアプリを開くという使い方もできます。

ここではメルアドのリンク方法とオプションの付け方について詳しくまとめました。

メルアドをリンクさせる基本

メールアドレスをリンクにする方法はとても簡単です。

次のようにaタグのhref属性mailto:  から始まるメルアドを指定するだけ

このリンクは hoge@dummy.com  というメールアドレスへのリンク

これをクリックするとアドレス欄が入力された状態でメールアプリが起動します。

 

Windowsだった場合はOutlook、Macの場合はMail.app、
スマホの場合はインストールされたメールアプリなど・・・

その端末でデフォルトのメールアプリやソフトが自動で起動してくれます。

 

以上がメールアドレスをリンクさせる方法

たったこれだけですが、メールアドレスには色々オプションもつけられます。

メールリンクにつけることができるオプション一覧

メールリンクにつけられるオプションは次の通り

  • カーボンコピー - cc
  • ブラインドカーボンコピー - bcc
  • メールの題名 - subject
  • メールの本文 - body

この4つのオプションの付け方についてそれぞれ説明していきます。

カーボンコピー

カーボンコピー(CC)というのはメールの複製を他の宛先にも送る場合に使う機能

この機能を使う場合はメルアドの後に ?cc=宛先  のようなオプションをつけます。

 

例えば次はCCに piyo@dummy.com  を指定しているリンク例

?cc=piyo@dummy.com  がカーボンコピー指定している部分です。

 

もしCCに複数メルアドを指定したいならコンマ( ,  )またはセミコロン( :  )で区切ればOKです。

例えば次はCCに2つのメルアドを渡しているリンク例

コンマを使うなら ?cc=piyo@dummy.com,fuga@dummy.com  のように、

セミコロンを使うなら ?cc=piyo@dummy.com;fuga@dummy.com  のようになります。

どっちかと言えばコンマを使う方が一般的かも

ブラインドカーボンコピー

ブラインドカーボンコピー(BCC)も他の宛先にメールの複製を送る機能

CCと違うのは他の宛先(TOやCCや他BCC)にBCCしたことがバレずに送れるということ

この機能を利用する場合は ?bcc=メルアド  をオプションにつけます。

 

例えば次は piyo@dummy.com  をBCC指定しているリンク例

CCの場合と全く同じです。

もちろん複数メルアドもコンマまたはセミコロンで区切って指定できます。

メールの題名

メールを送信するときの題名を指定するにはsubjectオプションを使えばOK

?subject=題名  のよう指定するとメールアプリで題名が入力された状態で起動します。

 

例えば次は「Hello」という題名を指定しているリンク例

リンクをクリックしてメールソフトが起動すると件名に「Hello」が入力されています。

 

ただし件名やこの後紹介する本文を指定するときは注意点が1つあります。

その注意点とは日本語を直に書くと文字化けしてしまうということ

 

なのでURLに件名などを指定する場合は必ずURLエンコードしましょう。

例えば次は題名に「こんにちは」をURLエンコードしたものを指定したリンク例

エンコードする文字コードはUTF-8を使っておけばほぼ問題ないと思います。

 

ちなみにURLエンコードする場合は次のツールを使うと便利

日本語を入力して「エンコードする」を押せばURLエンコードが取得できます。

メール本文

mailtoには件名だけでなく、メールの本文そのものも指定可能

本文指定にはbodyオプションを使い、 ?body=本文  のようにして設定できます。

 

例えば次が本文を含んだメールリンク例

上のリンクでは ?body=Are you doing well?  が本文指定しています。

「空白とかそのまま含んでて大丈夫なの?」と思ってしまいますが、問題なく表示されます。

 

ただし本文については改行はそのまま表示できないことに注意です。

当然HTMLの属性値は複数行にできないので代わりの方法を使わないといけません。

 

ではどうするかというと改行を %0D%0A  で置き換えます。

先ほど日本語を指定したように改行もURLエンコードすればOKです。

例えば次が改行を含む本文を指定しているリンク例

こうすれば次のように改行して表示されるはずです。

また本文に日本語を使うときもURLエンコードは忘れずに

複数オプションをまとめて指定

もし複数のオプションをまとめてつけたいなら &  でつなげればOKです。

例えば次はCCとBCCの両方指定しているオプション例

件名(subject)や本文(body)を同時に渡す場合も同じです。

ここまでのまとめ

メールリンクの作り方まとめ

  • aタグのhref属性をmailto:で始める
    例えば mailto:hoge@dummy.com  のようにhref属性値を指定
    リンクをクリックすることで端末でデフォルトのメールアプリが開く
  • メールリンクにはオプションも指定可能
    カーボンコピーやブラインドカーボンコピー、件名や本文なども含められる
    ただし日本語や改行はURLエンコードする必要があることに要注意
    また複数オプションを指定するときは &  でつなげればOK

ということでメールをリンクさせる方法についてでした。

ではでは($・・)/~~~