【コピペOK！】ボタンや画像にメールアドレスをリンクさせる方法

ポートフォリオやHPなどの制作の際、お問い合わせフォームを作成と併せてメールアドレスのリンクを作成することもあります。

今回はコピペOK！テキストや画像などにメールアドレスをリンクさせる方法をご紹介します。

それでは早速リンクを作成していきます。

今回はこのような簡易的なボタンを作成しました。
クオリティは度外視なんでツッコミはなしでお願いします(笑)

See the Pen メールリンク by ちきんまさ@Web自由人 (@koujousijousyug) on CodePen.

リンクを作成する方法は簡単です。

今回は<p>タグのテキストにリンクをさせるのですが、実際のリンクの仕方はこうです。

<a href="mailto:chikinmasa0307@gmail.com"><p>メールにとぶよ</p></a>

リンクを作成するため<a>タグで囲み、『href属性』にURLではなく『mailto:（アドレス）』を入力してリンクを貼ります。

実際のコピペもできるHTMLが下記です。

See the Pen メールリンク２ by ちきんまさ@Web自由人 (@koujousijousyug) on CodePen.

今後使用する場面も多いかと思いますので、活用していきましょう！