初めてのHTML入門⑫

えも

2021年3月12日 11:19

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

アンカータグ<a></a>

アンカーとは
「錨」という意味合いがあり、プログラミングの世界では、「リンクのとび先」を指定するものです。

アンカータグの中には2つの情報を持たせることができます。
1つ目は、”href属性”で、リンクのとび先を指定するための属性です。2つ目は”id属性”で、ページの中のある特定の部分について名前を付けるという役割があります。

では実際に、HTMLを書いて見ていきましょう。

HTMLを書いて見る

下記のようなファイルを用意しましょう。

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

</body>
</html>

ボディの中にアンカータグで”My Link”という風に書いて保存してみましょう。

<body>
<a>My Link</a>
</body>

するとブラウザ上では、このように表示されます。

現状ではリンクのとび先が指定されていないので、表示されているだけで一切触ることはできません。
そこで、アンカータグの中に情報を追記していきましょう。

<body>
<a href＝”http://www.google.co.jp/”>My Link</a>
</body>

すると、下線が引かれ一般的にみる”リンク”の状態になったことがわかります。そして、リンクをクリックすると、URLの場所に飛ぶことができます。

では、改行をいくつか入れて、下の方に”ここは、indexというidがついた場所です”というパラグラフ（段落）を用意しましょう。

<body>
<a href＝”http://www.google.co.jp/”>My Link</a>
 
 
 
ここは、indexというidがついた場所です
 
 
 
</body>

ブラウザ上では、改行が追加され、下の方にスクロールすると”ここは、indexというidがついた場所です”という文章が表示されます。

では、このパラグラフにid属性を追加しましょう。

ここは、indexというidがついた場所です

次に、アンカータグ内の”href属性”を”index”というidの場所に書き換えます。”id”の場所を示すときには”＃”を使います。

<body>
<a href="#index">My Link</a>
 
 
 
ここは、indexというidがついた場所です
 
 
 
</body>

このように書き換えて、保存し、ブラウザを更新すると、

表示は変わりませんが、リンクのとび先が変わっていることがわかると思います。

このように、アンカータグには別のページに飛ばすだけではなく、同じページ内の中でもリンクのとび先を指定することができるということを覚えておきましょう。
これによって、ユーザーの見たい場所を速やかに表示させてあげることが可能です。

この note は”TechAcademy”の動画で学んだことを文字に起こして
備忘録及び自分のアウトプットとして公開しています。
https://youtu.be/Eo-_dQRstGU
実際に動画を見ながら手を動かすのも有効だと思います。
いきなりハードルを上げると挫折してしまうので、簡単なことから継続して徐々にレベルアップしていきましょう。

この記事が気に入ったらサポートをしてみませんか？