MENU
小さな一歩、大きな変化

aタグの正しい使い方! aタグを使ってページ内リンクを作る方法

HTML
本記事にはPR広告が含まれています。

本記事にはPR広告が含まれています。掲載されている広告についての詳細はプライバシーポリシーをご参照ください。

今回はハイパーリンクなどを作ったりする際に使われるHTMLタグであるaタグの正しい使い方についてを解説していきたいと思います。

またaタグで作られたリンク付き文字のデザインをカスタマイズする方法や、ページ内リンクの作成方法などaタグの少し実践的な内容についても触れていますので、興味がある方は是非ご覧下さい。

目次

aタグとは?

aタグとはウェブサイトの中で外部リンクや内部リンクなどのハイパーリンクを作ったりする際に使われるHTMLタグです。

aタグの名前の由来は、英単語のanchor(日本訳: いかり)から来ています。

また、aタグでリンクを貼ることができるのは文字だけでなく画像でもよく、リンクバナーなどを作る際にも使われます。

(以下にリンク付き文字、リンクバナーの2つのサンプルを準備しました。どちらをクリックしても新しいタブが開かれてこのウェブサイトのトップページが開かれるはずです。)

トップページへ戻る

aタグの正しい使い方

それではaタグの正しい使い方についてを解説していきます。

リンクを付けたい文字や画像をaタグで囲う

まずaタグを使ってリンク付き文字を作りたい場合は、リンクを付けたい文字や画像をaタグで囲います。(下の例では文字を囲っています。)

<body>
  <a>トップページへ戻る</a>
</body>
ブラウザーはGoogle Chromeを使用

ただし、aタグで文字を囲った状態ではまだ何の変化もなく、文字をクリックしても反応がない状態だと思います。

これは次に説明するhref属性を指定していないからです。

href属性を指定して、飛び先としたいページを値に入力する

次に、aタグにhref属性を追加して、href属性の値には飛び先としたいページを指定します。(例では当サイトのトップページへと飛ばすように指定しています。)

<body>
  <a href="https://plusoneweb.net">トップページへ戻る</a>
</body>
ブラウザーはGoogle Chromeを使用

href属性を指定すると、上のように文字が青色に変更され、文字の下にアンダーラインが付いたと思います。

これはブラウザが指定しているデフォルトCSSによるものです。

またこちらのリンク付き文字をクリックすると、当サイトのトップページへと飛ぶようになったと思います。

なお、飛び先としたいページを指定する際の指定方法については絶対パスと呼ばれる指定方法と相対パスと呼ばれる指定方法があるのですが、これらの違いについては別の記事にて解説しておりますので、気になる方は以下の記事も併せてご覧下さい。

あわせて読みたい
絶対パスと相対パスの違いとそれぞれの記述方法について 今回は、画像を挿入したり内部リンクや外部リンクを付けて別ページにジャンプさせたりする際に必ず知っておかなければならない「パス」という概念、またその中でも絶対…

別タブで開きたい場合はtarget属性、値_blankを指定する

次に、リンク付き文字をクリックした際、リンク付き文字が表示されているタブとは別のタブで飛び先ページを開きたい場合は、target属性に値_blankを指定します。

<body>
  <a href="https://plusoneweb.net" target="_blank">トップページへ戻る</a>
</body>
ブラウザーはGoogle Chromeを使用

これでリンク付き文字をクリックすると、上のように別タグが開かれ飛び先ページが表示されるようになったはずです。

ただし1点注意点があり、外部リンクを作る際にこのtarget=”_blank”という指定を使用するのはセキュリティ面やパフォーマンス面で問題があるとされています。(これはGoogleのディベロッパーサイトで以下のように記述されています。)

When you link to a page on another site using the target=”_blank” attribute, you can expose your site to performance and security issues:

・The other page may run on the same process as your page. If the other page is running a lot of JavaScript, your page’s performance may suffer.
・The other page can access your window object with the window.opener property. This may allow the other page to redirect your page to a malicious URL.

Adding rel=”noopener” or rel=”noreferrer” to your target=”_blank” links avoids these issues.

引用: Google Developersサイト(https://web.dev/external-anchors-use-rel-noopener/)

そこで、セキュリティ面やパフォーマンス面で安全な状態を保ちたい場合は以下のようにtarget属性と合わせてrel属性、値noopener、noreferrerを指定してあげることが推奨されているので極力これらも指定するようにしておきましょう。(ちなみにWordPressでは、バージョン4.7.4以降からaタグにtarget=”_blank”を指定すると、rel=”noopener noreferrer”が自動付与されるようになっているようです。)

<body>
  <a href="https://plusoneweb.net" target="_blank" rel="noopener noreferrer">トップページへ戻る</a>
</body>

aタグで作られたリンク付き文字のデザインをカスタマイズする

ここではaタグで作られたリンク付き文字のデザインをカスタマイズする方法を紹介します。

文字の下のアンダーラインを消す

先ほど上の方で「aタグで作られた文字付きリストはブラウザのデフォルトCSSが効いている為、文字の下にアンダーラインが付いている状態で表示される」と説明しました。

このアンダーラインを消したい場合は、text-decorationプロパティの値をnoneに指定してあげる必要があります。

<body>
  <a href="https://plusoneweb.net/" target="_blank" rel="noopener noreferrer">トップページへ戻る</a>
</body>
a{
  text-decoration: none;
}
BEFORE(ブラウザーはGoogle Chromeを使用)
AFTER(ブラウザーはGoogle Chromeを使用)

これでリンク付き文字の下にあったアンダーラインを消すことができました。

文字の色を変更する

こちらも先ほど上の方で「aタグで作られた文字付きリストはブラウザのデフォルトCSSが効いている為、文字が青色になる」と説明しましたが、この文字色を変更したい場合はcolorプロパティを指定することで文字色を変更することができます。

今回は変化が分かりやすいように文字色を赤色(red)に指定してみました。

<body>
  <a href="https://plusoneweb.net/" target="_blank" rel="noopener noreferrer">トップページへ戻る</a>
</body>
a {
  color: red;
}
BEFORE(ブラウザーはGoogle Chromeを使用)
AFTER(ブラウザーはGoogle Chromeを使用)

リンク付き文字にカーソルが当たると背景色が付くようにする

リンク付き文字にカーソルが当たると背景色が付くようにするには、カーソルが当たっている状態のときだけに背景色を付けるという指示ができるように擬似クラスhoverを使用します。

擬似クラスhoverの使い方は簡単で、以下のようにセレクターの後ろに:(コロン)hover{}と記述し、{}の中にカーソルが当たっている状態のときだけに指定したいCSSプロパティを記述します。

<body>
  <a href="https://plusoneweb.net/" target="_blank" rel="noopener noreferrer">トップページへ戻る</a>
</body>
a {
  width: 200px; /* 水平方向のヒットポイントを拡張する為に指定 */
  display: inline-block; /* aタグはデフォルトでインライン要素である為、ブロック要素に変更するのに指定 */
  text-align: center; /* 水平方向中央に文字を配置するのに指定 */
  padding: 15px 0; /* 垂直方向のヒットポイントを拡張するのに指定 */
}

a:hover{
  background-color:#eee ;
}
ブラウザーはGoogle Chromeを使用

これでリンク付き文字にカーソルが当たると背景色が付くようになりました。

aタグを使ってページ内リンクを作る方法

ここまではaタグの基本的な使い方についてを解説してきましたが、ここではaタグを使ってページ内リンクを作る方法についてを解説したいと思います。

なお、ページ内リンクとは以下のようにリンクをクリックするとページ内にある特定の箇所へと移動させることができるリンクのことを言います。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>aタグの使い方</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav>
    <ul>
      <li><a href="#home">HOME</a></li>
      <li><a href="#about">ABOUT</a></li>
      <li><a href="#price">PRICE</a></li>
      <li><a href="#contact">CONTACT</a></li>
    </ul>
  </nav>

  <h2 id="home">HOME</h2>
  <div class="height"></div>
  <h2 id="about">ABOUT</h2>
  <div class="height"></div>
  <h2 id="price">PRICE</h2>
  <div class="height"></div>
  <h2 id="contact">CONTACT</h2>
  <div class="height"></div>
</body>
</html>
.height{
  height: 1000px;
  background-color: aqua;
}

このようなページ内リンクを作るには大きく2つの手順があります。

手順1: 飛び先としたい要素にid属性を指定する

まずページ内リンクを作るには、飛び先としたい要素にid属性を指定してあげる必要があります。

上の例だと、h2タグで囲われた「HOME」「ABOUT」「PRICE」「CONTACT」が飛び先としたい要素なので、以下のようにid属性を指定しましょう。

<h2 id="home">HOME</h2>
<div class="height"></div>
<h2 id="about">ABOUT</h2>
<div class="height"></div>
<h2 id="price">PRICE</h2>
<div class="height"></div>
<h2 id="contact">CONTACT</h2>
<div class="height"></div>

これで飛び先としたい要素にid属性が付与されました。

手順2: リンク付き文字のhref属性の値にhref=”#id名”と指定する

次に、リンク付き文字のhref属性の値に、href=”#id名”と指定します。

<nav>
  <ul>
    <li><a href="#home">HOME</a></li>
    <li><a href="#about">ABOUT</a></li>
    <li><a href="#price">PRICE</a></li>
    <li><a href="#contact">CONTACT</a></li>
  </ul>
</nav>

これでリンク付き文字をクリックすると、h2タグで囲われた「HOME」「ABOUT」「PRICE」「CONTACT」箇所に飛ぶようになったはずです。

なお、ナビゲーションをクリックすると”スルッと”ターゲットとなる要素に移動させたりするアニメーションを追加することもできますが、これに関しては他の記事で解説していますので気になった方は以下の記事も併せてご覧下さい。(こちらの実装にはjQueryを使用します。)

あわせて読みたい
jQueryを使用してスムーススクロールを実装するコードとその解説 前回の記事ではaタグの正しい使い方についてや、aタグを使って基本的なページ内リンクを作る方法についてを解説しました。 ただし、上の動画を見てもらうと分かるように…

まとめ

以上、今回はハイパーリンクなどを作ったりする際に使われるHTMLタグであるaタグの正しい使い方についてを解説しました。

aタグはHTMLタグの中でも非常に使用頻度の高いタグの1つですので、正しい使い方やCSSによるデザインのカスタマイズの方法等もしっかり理解しておくようにしましょう。

最後までご覧頂き、ありがとうございました。

HTML
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

著者情報

Ryoのアバター Ryo サイト運営者

Web系フリーランス4年目。

WordPressを使った企業サイト制作・改修やSEOを生業としています。

◾️スキルセット
HTML / CSS / SASS / JavaScript / jQuery / PHP / WordPress / Laravel（現在勉強中） / SEO / ライティングなど

関連記事

目次