※本記事は、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ブラウザに表示されるかを確認してみましょう。
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ブラウザで確認してみましょう。
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>このコードにより、下記のようなブラウザの表示になっていると思います。
href属性の参照先に「#」をつけることによって、HTML上では「id」という意味を持ちます。この表記は、HTMLだけでなく、今後CSSでも使用する知識ですので、ぜひ覚えておいてください。
おわりに
今回は、アンカータグについて見てきました。多くのWebページには、ユーザーがみたいページや場所を参照できるように、href属性やid属性が多く組み込まれています。そういった意味で、今回学んだことは、実務上も非常によく使われる技術といえます。
次の記事はこちら
※鋭意制作中です。
