トップページ  > ウェブ制作チュートリアル  > メールリンクを指定する
第25章 メールリンク、TELリンク

★メールリンクを指定する

メールリンクを指定する

広告

ここからは、絶対に必要ではないけれど、配慮してあればウェブサイトがより良くなる…そんなテクニックを紹介していきます。

より使いやすいウェブサイトになるように、 「お問合せ」ページ(contact.html)で表示しているメールアドレスに、メールリンクを指定しましょう。

contact.htmlに以下の記述を追加してください。

HTMLソース(contact.htmlの抜粋)

<h3 id="info0002">メールでのお問合せ</h3>
<p>
<a href="mailto:xxx@xxxxxxxxxx.xxx">xxx@xxxxxxxxxx.xxx</a>
までメールをお送りください。
</p>
<hr>

保存をしたらブラウザで表示してみましょう。 メールアドレスの部分が青い下線付きのテキストに変わっているはずです。

メールアドレスの青い下線付きのテキストをクリックして、メールソフトが起動すれば成功です。

あらかじめメールの件名や本文を記載する

メールソフトが起動した際にあらかじめメールの件名や本文が記載されるようにしたい場合には、以下のように記述します。

HTMLソース(contact.htmlの抜粋)

<h3 id="info0002">メールでのお問合せ</h3>
<p>
<a href="mailto: xxx@xxxxxxxxxx.xxx?subject=ウェブサイトからのお問合せ&body=お問合せ区分をご記入ください(商品・採用・その他):">xxx@xxxxxxxxxx.xxx</a>
までメールをお送りください。
</p>
<hr>

subjectがメールの件名、bodyがメールの本文となります。 保存をしたらブラウザで動作を確認してみてください。

メールソフトが起動して、件名や本文があらかじめ記入されていれば成功です。



まとめ
  1. a要素でメールリンクを指定すると、クリックするだけでメールソフトが起動する
  2. メールリンクは、<a href="mailto:メールアドレス">~</a>の書式で指定する
  3. <a href="mailto: メールアドレス?subject=件名&amp;body=本文">~</a>の書式なら、件名や本文を初期指定できる
<前へ 目次へ 次へ>
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ