33歳主婦プログラマーを目指す

33歳主婦がプログラマーを目指してあれこれ奮闘する日記です

アンカータグについて

本日の教材動画はこちら 

<アンカー>タグ

アンカータグとは名の通り錨で、ネット上だとひっかける先になる。簡単に言うとリンク先ですね!タグは<a></a>。これだけだと機能しないので、以下の属性2つとセットにして使用する。

<href>属性

外部サイトへリンクしたい場合はこっちを使う。使い方は<a href="URL">〇〇〇</a>。〇〇〇部分がクリックできるようになり、クリックするとURL部分へ飛ばされる。

 

ネットでめっちゃみるタグですね!!ずっと<a href="">っていうタグだと思ってたので分解できたことにびっくりしました。あと読み方がずっと分からず勝手に「あへあー」って呼んでたんですが、今回「エイチレフ」っていう正式名称がわかったのもよかった。今まで勝手に変な読み方してごめんよ…。

<id>属性

こっちはページ内へリンクをしたい場合に使用。使い方は少し特殊で、「アンカータグ+href属性+id属性」と「他タグ」を跨いで使う。使える他タグに縛りはほとんどない模様。

 

使い方の例として、<a href="#index">〇〇についてみる。</a>でリンク先を「#index」というIDに指定。ページ内の飛ばしたい箇所のタグを<p id="index">〇〇について</p>としておく。こうすることでリンクを押したら速攻でページ内の指定箇所へ飛ばして(スクロール)してくれるようになる。

 

箇条書きのタイトルや内容をクリックすると、見たい箇所までスクロールしてくれる、まとめサイトではよくつかわれている手法ですね!

 

あと動画では説明してませんでしたが、調べたらIDをつける際は以下に注意する必要があるようです

1つのIDは、同じ文書内で1ヵ所にだけ使用できます。(重複させてはならない)
使用できる文字は、半角の英数字、ハイフン( - )、アンダーバー( _ )、コロン( : )、ピリオド( . )です。(ハイフン以外の記号は使わない方が無難です)
アルファベットで始めなければなりません。(数字や記号で始めてはならない 大文字と小文字の区別があります。

【参考元】TAGindex ID名について

 

 

本日勉強した内容

本日勉強した内容

 

出来上がったページID名について

出来上がったページ