JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTMLで件名付きのメール送信リンク（mailto）を作成する方法

Webページからメールを送信できるリンクを作成するには、<a>タグとhref属性を使用します。href属性の値として「mailto:」で始まるメールアドレスを指定することで、クリック時にメールソフトが起動するリンクが完成します。

さらに件名（Subject）を追加したい場合は、メールアドレスの後に「?」を付け、続けてSubject=パラメータを記述します。これらすべてを<a>タグの中に含めるだけで、件名入力済みのメール作成画面を開くリンクが実現できます。

作成時の注意点

mailtoリンクを作成する際は、以下の2点に注意しましょう。

  • 受信先のメールアドレスを必ず指定する：「mailto:」の直後に、メールを受け取りたいアドレスを正確に記述します。
  • 件名のスペースは「%20」に置き換える：件名に含まれる半角スペースは、そのまま記述するとブラウザによって正しく表示されない場合があります。URLエンコードのルールに従い、スペースは「%20」に置き換えて記述しましょう。

コード例

以下のコードを実行すると、件名付きのメール送信リンクがどのように動作するかを確認できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Email with subject</title>
   </head>

   <body>
      <h1>Contact</h1>
      <p>For any queries:<a href="mailto:demo@example.com?Subject=My%20Query">Contact us</a></p>
   </body>
</html>

この例では、「demo@example.com」宛てに件名「My Query」が入力された状態でメール作成画面が開きます。「My」と「Query」の間のスペースが「%20」に置き換えられている点に注目してください。

なお、mailtoリンクは訪問者の環境にインストールされたメールソフトに依存するため、GmailなどのWebメールを主に利用しているユーザーには動作しない場合があります。確実にお問い合わせを受け付けたい場合は、フォーム型の問い合わせ機能との併用も検討するとよいでしょう。

  1. HTMLでダウンロードリンクを作成する方法をわかりやすく解説

    HTMLでダウンロードリンクを作成するには、<a>タグにdownload属性を追加します。この属性を指定すると、リンク先のファイルがブラウザで開かれる代わりに、クリックした時点でダウンロードされるようになります。コード例以下は、画像をクリックするとその画像ファイルがダウンロードされるサンプルコードです。<!DOCTYPE html> <html> <body> <h1>Download Link example</h1> <a href="https://i.picsum.photos/id/225/800

  2. Macの「メール」アプリでHTML署名を作成する方法

    HTML署名を使えば、太字や斜体などの文字装飾、SNSやウェブサイトへのハイパーリンク、さまざまなフォントサイズを組み合わせた、リッチで洗練された署名をすべての送信メールに自動的に添付できます。しかし、Macの標準「メール」アプリには、こうした装飾付きのHTML署名を直接作成する機能が用意されていません。とはいえ、ちょっとしたテクニックを使えば、「メール」アプリでもHTML署名を設定することが可能です。この記事では、新規メッセージ作成画面で署名を作り込み、それを環境設定にコピー＆ペーストする方法を詳しく解説します。HTML署名の作成手順1. 「メール」アプリを起動するDockにあるLaunch