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

2021年5月28日2021年5月30日

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

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

aタグとは?

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

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

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

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

トップページへ戻る

aタグの正しい使い方

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

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

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

<body>
  <a>トップページへ戻る</a>
</body>

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

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

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

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

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

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;
}

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

文字の色を変更する

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

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

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

a {
  color: red;
}

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

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

まとめ

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

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

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

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

著者情報

Ryo サイト運営者

当ブログを運営しております、フリーランスWebコーダーのRyoです。

元々はWebとは無関係の日本語講師をしていましたが、仕事をしながら旅をするWebエンジニアの男性と知り合い、「自分もこんな生き方をしたい」と感じ、その道を歩むことを決意しました。

人脈・実績0からの挑戦でしたが、泥臭くも約4年近くフリーランスとして生活しています。