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

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

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

メールが起動します!

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


ソースコード

<!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もフォローしてね!

おすすめ記事


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

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

いいことあるかも!
1

おさかな

学習メモ

「プログラミング」で学んだことのメモ書きになります。「コード」をたくさん載せていくので、ぜひ参考にしてみてください!
1つのマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。