【HTML5入門】4-1 アンカータグ(HTMLのリンク)

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

※本記事は、Tech Academyの下記YouTube動画を参考に書かせて頂いております。

前回のおさらい

前回は、項目情報がセットになったリスト表記について学んできました。

今回は、アンカータグについて学んでいきましょう。

アンカータグとは

アンカータグを学ぶ前に、「アンカー」という言葉の意味を理解しておきましょう。

アンカーは「錨(いかり)」を表す英単語”Anchor“を示しております。船を留めておくためのものです。

Web上におけるアンカーは、「リンクの飛び先」を意味します。そのため、アンカータグは、リンクの飛び先を指定するタグ、ということができます。

アンカータグに使用する2つの属性

アンカータグを作る際に使用する2つの属性があります。それが以下です。

  • href属性
  • id属性

それぞれ順番に確認していきましょう。

href属性

hrefは、「Hypertext Reference」の略で、「リンクの参照先」を意味します。この属性を定義することにより、クリックなどがされたときに指定するWebページへ遷移させることができます。

id属性

idはユーザー管理などで一般的に使われている「ID」とほぼ同義です。id属性となった時の役割としては、「ページの中のある特定の部分に名前をつける」となります。

HTMLに記述してみよう

これら2属性は、文字で理解するよりも、実際に記述するコードから理解した方がわかりやすい部分が多いので、早速、2つの属性を使って、実際にHTMLファイルに記述をしてみましょう。初期状態のHTMLコードは下記の通りです。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>

  </body>
</html>

アンカータグを記述してみよう

では、まずは属性を使うためのアンカータグを用意しましょう。アンカータグの頭文字「a」を用い、コードを下記のように記述してみました。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <a>My Link</a>
  </body>
</html>

この状態でどのようにWebブラウザに表示されるかを確認してみましょう。

「My Link」は表示されましたが、href属性で参照先のURLを指定していないため、クリックしても何も反応はありません。

href属性を用いて、Googleに飛ばしてみよう

今度は、実際に「My Link」をクリックすると、Googleのページに遷移するようにしてみましょう。href属性を用いて、下記のようにGoogleのURLを入力します。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <a href="https://www.google.co.jp/">My Link</a>
  </body>
</html>

では、これをWebブラウザで確認してみましょう。

ページを更新すると、文字が青くなり、下線が付きました。これが、href属性が適用されている証です。クリックすると、きちんとGoogleのページに遷移することができています。

id属性を新たに付与してみよう

次に、id属性について見ていきましょう。href属性のリンクの参照先を「index」というidがついた場所にしてみます。コードは下記の通りです。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <!-- リンクの参照先を#indexに変更> -->
    <a href="#index">My Link</a>
  </body>
</html>

このままですと、indexというidがないので、indexというid属性を持ったpタグを作ってみましょう。同一ページ内の遷移が可能であることを確認するため、間に大量のbrタグを仕込み、それぞれの文章が離れるようにしています。コードは下記の通りです。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <a href="#index">My Link</a>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <p id="index">ここはindexというidがついた場所です</p>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
  </body>
</html>

このコードにより、下記のようなブラウザの表示になっていると思います。

では、この状態のコードで「My Link」をクリックしてみましょう。以下のような挙動になれば成功です。
このようになったのは、href属性に「idがindexとなっているところを参照する」という役割がついたからです。

href属性の参照先に「#」をつけることによって、HTML上では「id」という意味を持ちます。この表記は、HTMLだけでなく、今後CSSでも使用する知識ですので、ぜひ覚えておいてください。

おわりに

今回は、アンカータグについて見てきました。多くのWebページには、ユーザーがみたいページや場所を参照できるように、href属性やid属性が多く組み込まれています。そういった意味で、今回学んだことは、実務上も非常によく使われる技術といえます。

次の記事はこちら

※鋭意制作中です。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
     

コメントを残す

*