【HTML初心者向け】はじめてでもわかる！HTMLでリンクを貼るaタグの使い方！

HTMLでリンクを設定する意味

たとえばこのようなクリックできるテキストをリンクといいます。インターネット上のHTMLサイトでは、メニュー画面からリンクをどんどんたどっていって、他のページへ移動します。リンクは、サイトを見に来てくれた人が必要な情報にたどり着くための、道標やドアの役割を担っているのです。

リンクを設定する際に使うタグ 解説！

リンクを貼るには、aタグを使います。"(ダブルクォーテーション)で囲んだ部分に、リンク先のURLを書きます。aタグで挟まれた部分に、リンクとして表示したい文字(アンカーテキスト)を書きます。

上記のタグを実際のHTMLで表示すると、このようになります。

絶対URL・相対URLの使い分け

リンクにつかう URL (xxx.html の部分) の書き方は、大きく分けて絶対URLと相対URLの2種類があります。

相対URLは、現在開いているページを基準にして、どのページに移動するかを記述する書き方です。 それに対して絶対URLとは、「http〜」からのインターネット上のアドレスを完全に記述する書き方です。

リンク全てに「ｈｔｔｐ://www.xxxxx〜」と書いてしまうと、HTMLのテストを別の環境で行う場合や、ファイルを移動したときの変更が大変になってしまいます。このため、自分のサイト内のリンクは通常*相対URL*で記述します。

他のサイトへのリンクは、httpから始まる絶対URLで記述してくださいね。

リンクを貼ろう！覚えておきたい aタグの書き方８個！

ここからは、具体的にどんな使い方をするのか、解説していきます！

同じウインドウでひらくリンク

基本のタグで記載すると、ブラウザの同じウインドウで新しいページが開きます。ウインドウが複数開かないので、サイトを見ている人はサクサクとネットサーフィンができますが、リンク元のサイトに戻りたくても履歴をたどる必要があり、戻りづらいという面もあります。

別ウインドウでひらく

target="_blank"をタグにつけると、開いた新しいウインドウにリンク先のページが表示されます。リンク元のページを別ウインドウに残す事ができるので、サイトを見ている人にまた戻ってきてもらいたい場合や、複数のページを同時に見たほうが便利な場合などに使うと良いでしょう。

ただし、たくさんのウインドウが開きすぎると、サイトを見ている人に不快な印象を与えてしまうこともあります。多用には注意しましょう。

同じページ内で移動する

同じページの指定した場所にリンクをはることもできます。 スマートフォン対応ページで特にここ数年よく見る、長〜い1枚のHTMLページ(ランディングページ)などでもよく使われていますね。

リンクを押して移動したい場所のタグに、id=を使って名前をつけておきます。名前をつけるタグは、hタグでもpタグでもdivタグでもかまいません。

サンプルコード

<div class="tagtag">
サンプル：<br>
この記事の<a href="#tag1"><b>まとめ</b>に飛ぶリンク</a>
</div>

表示結果

画像にリンクをはる

リンクは、テキストだけでなく画像にも貼ることができます。

画像を表示するタグを、アンカーテキストを書き込んでいた場所に記載します。すると、画像をクリックすると指定したページに飛ぶリンクになります。

サンプルコード

<div class="tagtag">
サンプル：<br>
まとめに飛ぶ画像は
<a href="#tag2"><img src="link_sample.jpg"></a>
こちら
</div>

表示結果

サンプル：
まとめに飛ぶ画像はこちら

リンク先をファイルにする

PDFやテキストファイル、Word、Excelなどのファイルをリンク先に指定することができます。サンプルファイルや、資料などをダウンロードさせたい場合に活用できそうですね。

個人情報の記載されたファイルは、インターネットに置いてはいけませんよ。

サンプルコード

<div class="tagtag">
html_link_sample.pdf：<br>
<a href="html_link_sample.pdf">ダウンロードはこちら</a>
</div>

リンクに下線を表示しない

リンクの線を、CSS(スタイルシート)で変更することができます。スタイルシートとは、HTMLで記載した文字や画像の配置や色を細やかに設定するためのコードです。

サンプルコード

<!-- ここからスタイルシート -->
<style>
/* リンクの線をなくす変更 */
a.sample1 {
  text-decoration: none;
}
</style>
<!-- スタイルシートここまで -->

<a href="xxx.html" class="sample1">下線を表示しないリンク</a>
<a href="xxx.html" >変更を設定していないリンク</a>

表示結果

リンクには「sample1」という名前をつけたスタイルシートの設定を作り、指定したリンクだけ下線を表示しないようにしています。

リンクを好きな色に変える

スタイルシートによって、リンクの色も変更できます。

サンプルコード

<!-- ここからスタイルシート -->
<style>
/* リンクの色を変更 */
a.sample2 {
  color:red;
  text-decoration: none;
}

/* マウスを載せたときの色を変更 */
a.sample2:hover {
  color:#orange;
}
</style>
<!-- スタイルシートここまで -->

<a href="xxx.html" class="sample2">文字を赤にし、下線を表示しないリンク</a>
<a href="xxx.html" >変更を設定していないリンク</a>

表示結果

リンクを赤文字にして、マウスをのせるとオレンジになるようにしました。リンクには「sample2」という名前をつけたスタイルシートの設定を作り、指定したリンクだけ色が変わるようにしています。

リンクをボタンにする

上記の色や線を変更するCSSを応用することで、リンクをボタンのような見た目にすることもできます！他にも色々な見た目に変更できるので、調べて試してみてくださいね。

サンプルコード
<!-- ボタンにするスタイルシート ここから -->
<style>
.sample3_btn {
    display: inline-block;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    color: white;
    background: pink;
    font-weight: bold;
    border: solid 4px pink;
    border-radius: 8px;
}

.sample3_btn:hover {
    background: white;
    color: pink;
}
</style>
<!-- ボタンにするスタイルシート ここまで -->

<a href="#tag1" class="sample3_btn">sample</a>

表示結果

sample

おすすめ弊社記事：
もう悩まない！コピペで簡単CSSボタンデザインと便利なジェネレータ8選
【CSS初心者向け!】角を丸くする方法をコードを交えて詳しく解説

まとめ

リンクの貼り方はわかりましたか？コピー&ペーストして、リンク先(src=".....")を書き換えることから、まずは始めてみましょう！