バナー画像

<a href=””>とは

<a href=””>タグの「a」とは、「Anchor(アンカー)」の略で、ハイパーリンクとしての用途で使用します。この記事では、aタグのリンク先を指定する「href属性」の使い方について解説します。

href属性でリンク先を指定

href属性には、リンクがクリックされた時のリンク先を指定します。リンク先には、別のページのURLや、
ページ内のスクロール先などが指定できます。

以下は、href属性に指定できるリンク先の種類です。大きく5種類あります。

種類 用途
URL(相対パス) 外部サイトへのリンク
URL(絶対パス) 自サイト内のページへのリンク
ページ内要素のID(スクロール先の要素) ページ内の特定位置へスクロール
メール送信・印刷 メーラーの起動や印刷
スクリプト JavaScriptの実行

 

では、以降の内容で詳しく見てみましょう。

URL(相対パス)で指定

サイト内の別ページへリンクしたい時などに使用します。相対パスは、現在表示されているURLのページを起点に、リンク先ページのURLを指定します。

次の例は、現在のページと同じフォルダ内にある「page2.html」にリンクを行う例です。

<a id="link" href="page2.html">リンクに表示するテキスト</a>

リンク先のページが、現在のページと別のフォルダに存在する場合は、相対パスでフォルダを指定します。以降で詳しく見ていきましょう。

<a id="link" href="sub_forlder/page2.html">リンクに表示するテキスト</a>

 

<a id="link" href="../page2.html">リンクに表示するテキスト</a>

 

次のようなフォルダ構造で、「page1.html」から「page2.html」にリンクさせたい場合は、次のように書きます。

【フォルダ構造】

.
├ folder1
│ └ page1.html
└ folder2
  └ sub_folder
    └ page2.html

【html】

<a id="link" href="../folder/page2.html">リンクに表示するテキスト</a>

URL(絶対パス)で指定

リンク先のページが、別のWebサイトの場合、href属性にしているURLは絶対パスでしちえるする必要があります。

絶対パスは次の例のように、「http://」の部分から全て指定します。

<a id="link" href="http://style.potepan.com/">リンクに表示するテキスト</a>

また最近は、SSLに対応しているサイトが多いため、httpsに対応しているサイトの場合は、次のように「https」でURLを指定しましょう。

<a id="link" href="https://style.potepan.com/">リンクに表示するテキスト</a>

ページ内の特定の場所にスクロール

href属性に、ページ内の要素のID属性を指定すると、その要素へスクロールさせる事ができます。例えば、目次のリンクから、対象の章へジャンプさせる時などで使用します。

<div>
    <p>目次</p>
    <a href="#page-link1">見出し1</a>
    <a href="#page-link2">見出し2</a>
</div>
<h2 id="page-link1">見出し1</h2>
・・・

<h2 id="page-link2">見出し2</h2>
・・・

メール送信・印刷

href属性に次のように記述すると、メール送信用のリンクにすることができます。リンクをクリックすると、利用者の既定のメールアプリが起動し、送信先のメールアドレスを指定した状態でメールの作成画面が表示されます。

<a href="mailto:demo@example.com?subject=件名">メールを送る</a>

スクリプト(JavaScript)の実行

href属性にはJavaScriptも記述できます。リンクがクリックされた時に、スクリプト処理を実行したい時に使用します。

<a href="javascript:alert('demo')">JavaScirptの実行</a>

<a href>のリンクを無効化する方法

ここでは、href属性の指定を無効化する方法を3つ紹介します。

<a>タグは通常、href属性に指定したリンク先へ移動する為に使用しますが、href属性を無効化して、別のスクリプト処理を動かす使い方もします。

ハッシュ(href=”#”)で無効化

以下のように、href属性に”#”(ハッシュ)を入れてリンクを無効化します。

<a  href="#">リンクに表示するテキスト</a>

ただし厳密には、”#”(ハッシュ)は、ページの一番上にジャンプする機能のため、縦長のページで使用した場合、下のイメージ動画のように、ページ上部にスクロールが戻ってしまう為、後述する「JavaScriptで無効化」と組み合わせて使用する必要があります。

ハッシュのリンククリック時にページ上部にスクロールが戻るイメージ

javascript:void(0)で無効化

href属性に次のように記述して、リンクを無効化する方法もあります。

<a href="javascript:void(0)">リンクに表示するテキスト</a>

この方法を使用すると、リンクにマウスカーソルを当てると、ブラウザの下の方にhref属性で指定した「javascript:void(0)」が丸見えになってしまい、これを嫌う方もいます。

void(0)を指定したリンクにマウスカーソルを合わせた時のイメージ

ポテパンダの一言メモ

void(0)って何
voidはJavaScriptの演算子で、結果を必ず undefind で値を返す性質があります。引数にvoid(0)を渡しているのは慣例的にそうしているのであって、引数は実際に何でも構いません。href属性はundefindを指定すると、何も動作しなくなります。

JavaScriptで無効化

最後に、JavaScriptで<a href=””>タグのリンクを、無効化する方法を紹介します。

・HTML

<a id="link" href="https://style.potepan.com/">リンクに表示するテキスト</a>

・JavaScript

プレーンなJavaScriptで書くと、次のようになります。

document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("link").addEventListener("click", function(event) {
        event.preventDefault();
    });
});

JQueryを使用する場合は、次のように書くこともできます。

$(function() {
    $("#link").click(function() {
        return false;
    });
});

まとめ

aタグのリンク先を指定する「href属性」の使い方について解説してきました。

最近では、SEQの内部リンク対策として、Webサイト内のページをリンクでつなぎ、クローラがインデックスしやすいWebサイトにして、検索順位の上位を狙ったりする時にもaタグを使用します。

上記のように、Webサイトの制作現場では、必ずと言っていいほどaタグを使用するため、是非覚えておきましょう。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。