自分のホームページの中でページどうしを連携したい、他のサイトを紹介するリンクを貼りたい、と考えることがありますよね。ではどうしたらいいのでしょうか？
HTMLを学んで間もない初心者でも大丈夫、特別な技術は必要ありません！HTMLでリンクを貼るために使うのが<a>タグです。
今回はHTMLで<a>タグを使うリンクの貼り方について解説します。基本的なリンクの貼り方について一緒に学んでいきましょう。
HTMLでリンクを貼る方法
WEBサイトを閲覧していると、このようなリンク表示をよく目にすると思います。
「ゼロからホームページ」にいますぐGO！
色がついた文字の部分をクリックすると、当サイト「ゼロからホームページ」のトップページへ飛ぶ仕組みです。指定した別ページへ飛ぶことをリンクするといいます。
HTMLのタグを使うことで、リンクを設定できます。
<a>タグとは？
HTMLでリンクを貼るためには<a>タグを使います。
<a>タグのaとは「anchor（アンカー）」の略です。リンクを設定したい場所を<a href>と終了タグの</a>で囲んで設定します。
hrefとは<a>タグとセットで使われる属性で「hypertext reference（ハイパーテキスト・レファレンス）」の略です。
基本的なリンクの貼り方6例
実際にHTMLでリンクを貼ってみましょう。基本的なリンクの貼り方について6つの例を紹介します。
同じウィンドウでリンクを開く方法
最もよく見かけるリンクの貼り方です。設定のしかたは、
<a href=”リンクを貼りたいURL”>表示したい文字（アンカーテキスト）</a>です。
では、実際に当サイトのアドレスを使って、Visual Studio CodeでHTMLを書いて試してみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale1.0">
<title>リンクを貼ってみよう</title>
<meta name="description" content="リンクを貼る練習">
</head>
<body>
<a href="https://yutowebdesign.hatenablog.com/">ゼロからホームページ</a>
</body>
</html>
「ゼロからホームページ」の文字部分が青くなっていて、クリックするとトップページへ飛ぶことができたら成功です！
一度クリックするとリンク部分の文字が青から紫に変化しますが、二度目のクリック以降は紫の文字部分をクリックすると同じようにリンク先へ飛ぶことができます。リンクの文字色を変えたい場合はCSSで設定します。
記事冒頭の例にあったように、「ゼロからホームページ」にいますぐGO！のような、リンク部分の外に文字を書きたい場合は、リンクを貼りたい文字以外の部分を閉じタグ</a>の外に書きます。
さきほどのHTMLの<a>タグに関する部分を下記に書き換えて試してみましょう。
<a href="https://yutowebdesign.hatenablog.com/">「ゼロからホームページ」</a>にいますぐGO！
別ウィンドウでリンクを開く方法
さきほど試した同じウィンドウでリンクを開く方法を少し応用したものが、別のウィンドウでリンクを開く方法です。下記のように書きます。
<a href="リンクを貼りたいURL" target="_blank" rel="noopener">アンカーテキスト</a>
「target」の前と「rel」の前には半角スペースを入れます。
では、実際に書いて試してみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale1.0">
<title>リンクを貼ってみよう</title>
<meta name="description" content="リンクを貼る練習">
</head>
<body>
<a href="https://yutowebdesign.hatenablog.com/" target="_blank" rel="noopener">ゼロからホームページ</a>
</body>
</html>
いま見ているブラウザでリンク部分をクリックして、別のウィンドウが開いて、当サイトのトップページが表示されたら大成功です！
この設定には1つ注意が必要です。たくさんのリンクを貼って、全て別ウィンドウで開くように設定してしまうと、サイトの閲覧者にとってはリンクをクリックするたびに、別ウィンドウが開いてしまうのでとても邪魔な状態になってしまいます。
別ウィンドウを開く必要性がないときには、むやみに設定しないようにしましょう。
画像にリンクを貼る方法
HTMLで画像を表示・挿入する方法については、「初心者のHTML：画像を表示・挿入するimgタグの使い方」の記事で解説しました。
画像の挿入はもう大丈夫だよ！という方はこのまま読みすすめてください。少し不安に思う方は記事を見直してみてください。
画像にリンクを貼るのは、画像の挿入とリンクを貼ることの複合技です。
HTMLでは、開始タグと終了タグの間に別のタグを入れることがあります。この書き方を入れ子といいます。入れ子にするときは、必ず先にある開始タグから順に、終了タグを書きます。画像にリンクを貼る場合は入れ子を使います。
<img>タグには終了タグがないので下記のようになります。altの前には半角スペースを入れてください。
<a href="リンクを貼りたいURL"><img src="リンクを貼りたい半角英数字の画像の名前.拡張子" alt="画像やリンクの説明テキスト"></a>
たとえば、リンクしたいURLが「ゼロからホームページ」で、空の写真にリンクを貼りたいとして、その画像の名前が「sora.png」だったら、
<a href="https://yutowebdesign.hatenablog.com/"><img src="sora.png" alt="ゼロからホームページトップ"></a>
となります。試してみてください。
1つ注意があります。画像が大きいほど表示に時間がかかってしまうため、リンクを貼る画像は、あまり大きいものにしないほうがいいでしょう。
同じページ内でリンクを貼る方法
たとえば、ブログのタイトル部分にリンクする場所を設定して、同じページの下の方からタイトル部分に一気にジャンプするリンクを貼ることができます。
この場合、タイトル部分が「h1」であれば、その後ろに「id」を付けることで設定ができます。
<h1 id="title">ブログのタイトル</h1>
上記のようにタイトル部分のHTMLを書いておいて、同じページ内でリンクを用意したい場所に
<a href="#title">タイトルへジャンプ</a>
このようにHTMLを書きます。そうすると、リンクの「タイトルへジャンプ」の文字部分をクリックすると、ブログのタイトル部分にジャンプすることができます。
メールアドレスのリンクを貼る方法
メールアドレスのリンクを貼る場合は、href属性に「mailto:」と書き、続きに送信したいメールアドレスを記述します。
<a href="info@example.com">お問い合わせメールアドレスはこちら</a>
サイトを見ているひとが使っているメールクライアントが起動して、送信先には指定したメールアドレスが入力されます。
電話番号のリンクを貼る方法
電話番号のリンクを貼る方法は、メールアドレスのリンクを貼る方法と似ています。
href属性に「tel:」と書き、続きに電話をかけたい電話番号を記述します。
<a href="tel:0312345678">TEL:03-1234-5678</a>
今回はリンクのテキスト部分と区別するためにハイフンを書きませんでしたが、半角でハイフンを入れて"tel:03-1234-5678"と書いても大丈夫です。
スマートフォンでサイトを見ている場合、リンク部分をタップすると電話をかけることができます。
まとめ
今回はHTMLで<a>タグを使ってリンクを貼る方法について解説しました。WEBサイトのURLだけでなく、問い合わせメールアドレスや電話番号もリンクを貼ることができましたね。
今回は省略しましたが、リンクの文字色を変える、リンク部分の下線を消すのはCSSで記述します。
私もみなさんと同じように試行錯誤している初心者です。CSSについてもこれから一緒に学んでいきましょう。
