前のページ見本次のページ】 更新日

W-2 メール送信用のリンクを作る

1)メールアドレスを追加します

コピーライトの下に、メールアドレスを書き加えますが
その時コピーライトの文字の最後に<br>を追加して、改行させ書き加えます

2)メールアドレスを追加します

メールアドレス部分にリンクを設定するため、<a href="〜">〜</a>で囲みます
hrefの値に送信先のメールアドレスを指定します。
!!このとき、メールアドレスの前に「mailto:」を付けるのがポイントです
<a href="mailto:sora@free.japandesign.ne.jp">〜</a>と書きます

3)リンクの作動を確認します

リンクをクリックすると、メーラーが起動します
メールの宛先にはhrefで指定したメールアドレスが挿入されています

<html>
<head>
<title>色探しの旅</title>
<style type="text/css"><!--

body{color:#666666;background-color:#f0f8ff}
h1{font-size:25px; font-family:'Comic Sans MS';color:royalblue}
span.iro{color:olive;font-weight:bold}
span.sora{color:navy}

p{width:360px;text-align:left;background-color:#dbe9dd;padding:20px;border-style:dotted;border-width:6px;border-color:#377c5f}
div.copy{background-color:#377c5f;color:#ffffff;font-size:smaller;padding:2px;width:30%;margin-top:20px}
--></style>
</head>
<body>

<div align="center">
<h1>色探しの旅『Sky&Water』</h1>

<p>日本の四季には色が満ちています。<span class="sora">空</span>そして<span class="sora">水</span>の色<span class="iro">『色探しの旅』</span>に出かけませんか</p>

<div class="menu"></div>
<a href="contents-h.htm">春の色</a>
<a href="contents-n.htm">夏の色</a>
<a href="contents-a.htm">秋の色</a>
<a href="contents-f.htm">冬の色</a>
<div class="copy">copyright(c)sora<br>
E-MAIL:<a href="mailto:sora@free.japandesign.ne.jp">sora@free.japandesign.ne.jp</a>
</div>
</div>
</body>
</html>