こんにちは、Mochiです。
HTMLでリンクってどうやって作るんだろう？リンクってどんな属性を入れればいいんだっけ？🤔
そんな方に向けてHTMLでのリンクの作り方とその応用をわかりやすく解説します！
🔗<a>タグによるリンクの作り方
HTMLにおいてリンクは<a>タグを使って作ります。”a”はリンクのHTMLにおける呼び名”anchor”の頭文字をとっています。<a>タグの間の内容にはリンクとして表示したい文字列を入れます。
<a>Mochi Blog</a>
ただ、それだけではクリックしても開きたいリンクに辿り着けません。そこで必要な属性を学んでいきましょう。
リンク先を記述するhref属性
リンク先を示すためにhref属性を使います。”href”はハイパーテキストの参照を意味する”hypertext reference”が起源だと言われています。hrefには主に3つのものを与えられます。
- URL
- HTMLファイルへのパス
- どのリンクも指さない
属性ってなんだっけ？🤔という方はこちらの記事に書いてあるので、ぜひ参考にしてみてください。
https://www.mochi-blog.blog/blog/html-image
それぞれ見ていきましょう。
URL
リンクと聞いてまず最初に浮かんだのはURLかもしれません。href属性にURLを入れることで、クリックした時にURLの示すサイトが開きます。
<a href="<https://www.mochi-blog.blog>">Mochi Blog</a>
HTMLファイルへのパス
HTMLファイルのパスを記述することで、そのファイルに移動し、ファイルのHTMLが表示されます。
<a href="image.html">Image</a>
パスってなんだっけ？🤔という方はこちらの記事を読むのが、良い復習になるためオススメです。
https://www.mochi-blog.blog/blog/html-image
どのリンクも指さない
hrefに#を指定することで、どのリンクも指さない状態になります。
<a href="#">リンクを指定してないです</a>
リンクを指定した場合、紹介した方法ではブラウザの現在の画面が新しいリンクに飛びます。ただ、別のタブを新しく開いて欲しい場合もあるかと思います。そんな場合に対応する方法をお伝えします！
別タブでリンクを開くtarget=”_blank”
今のページを開いたままにし、別のタブでリンクを開くためにはtarget属性に”_blank”と指定します。
<a href="<https://www.mochi-blog.blog>" target="_blank">Mochi Blogを別タブで開く</a>
🤓<a>タグの応用
これまで学んだ<a>タグを使った応用方法を見ていきましょう。
文字の中にリンクを貼る
文字の中に<a>タグを入れてあげることで、文字の一部がリンクの状態を作ることができます。
<p>Mochi Blogを開くには<a href="<https://www.mochi-blog.blog>">こちらのリンク</a>をクリック</p>
画像にリンクを貼る
<a>タグで画像を挿入する<img>タグを挟むと、画像にリンクを貼ることができます。画像をクリックすることで、リンク先に飛ぶことができます。
<a href="<https://www.mochi-blog.blog>">
<img src="sample.png" alt="サングラスをかけた3人の人"/>
</a>
<img>タグについて曖昧だと感じている方は、こちらの記事を見ていただくのがおすすめです。
https://www.mochi-blog.blog/blog/html-image
メールアドレスのリンクを貼る
href属性にmailto:を書き、その後ろにメールアドレスを記述することで、クリックによりユーザのメールクライアントが立ち上がり、メールアドレスが入力されます。念のためですが、このメールアドレスにメールは送らないでください😇
<p>気になる方は<a href="mailto:example@example.com">こちらから</a>メールを送ってください</p>
🎉まとめ
リンクを作成する<a>タグについて学びました。href属性にリンクを指定することで、リンクに飛ぶことができます。また、別タブで開くにはtarget属性に_blankを指定します。他にも応用方法を学びました。
今回、みなさんはリンクを作成することができるようになりました。素晴らしいです👏
リンクを貼ることで、他のページへの移動ができるようになり、一気に実装の幅が広がります。ぜひ何回もこの記事を読んで、リンクの作り方を思い返してください。
参考になれば幸いです。
読んでいただきありがとうございました！
