a(アンカー)タグのhref属性をマスター!htmlでリンク先を指定する方法を解説
  • facebookページ
  • twitterページ
  • 2020.01.31

    a(アンカー)タグのhref属性をマスター!htmlでリンク先を指定する方法を解説

    <a href=””>とは

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

    href属性でリンク先を指定

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

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

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

     

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

    URL(相対パス)で指定

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

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

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

    • サブフォルダの中にあるファイルを指定する場合

     

    • 親フォルダにあるファイルを指定する場合

     

    • 現在ページのとは、別の階層のフォルダにあるファイルを指定する場合

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

    【フォルダ構造】

    【html】

    URL(絶対パス)で指定

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

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

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

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

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

    メール送信・印刷

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

    スクリプト(JavaScript)の実行

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

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

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

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

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

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

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

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

    javascript:void(0)で無効化

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

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

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

    ポテパンダの一言メモ

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

    JavaScriptで無効化

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

    ・HTML

    ・JavaScript

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

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

    まとめ

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

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

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



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE