【HTML】✉クリックすると、「メール」を起動させる方法とは？！【学習メモ】

2019年7月5日 13:29

今回はこんな感じのを作っていきたいと思います！

このアイコンをクリックすると…。

メールが起動します！

「宛先」に指定したメールアドレスが、きちんと記載されています！

ソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
	<title>mail</title>
</head>
<body>
	<div id="mail">
		<a href = "mailto:osakana1699@gmail.com" target="_blank">
		<i class="far fa-envelope fa-3x"></i>
		</a>
	</div>
</body>
</html>

※「✉」メールのアイコンは「fontawesome」を使用しています。

・「fontawesome」の読み込み

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

・メールを起動させる

<body>
	<div id="mail">
                //メールの設定
		<a href = "mailto:メールアドレス" target="_blank">
                //「fontawesome」アイコンの指定
		<i class="far fa-envelope fa-3x"></i>
		</a>
	</div>
</body>

@osakana1699もフォローしてね！

おすすめ記事

「この記事おもしろい！」「おさかなは海に帰れ！」「泳げないおさかな…なんて…！」と、思ったそこのあなた！！！！ぜひ！サポートよろしくお願いします🙇 様々なジャンルの本を読むために活用させていただきます✨ 「え、読書する新種のおさかなだ！」と思ったあなたも！今すぐタッチ！