【HTML＆CSS】アンカータグについてまとめてみた

○アンカータグについて

アンカーとはそもそも錨のこと
同じページ内のリンクの飛び先を指定するもの

hrefリンクの飛び先を指定し、
id属性にてページの中にある特定部分について名前をつける

<li>タグのPortfolioから<h3>タグのPortfolioに飛ばしたい!!

手順は以下の通り
①リンクをつけたい場所に<a href="#title名">title名</a>を入力
②リンクを飛ばしたい箇所のタイトルに<a　id ="title名">title名</a>を入力

上記の例でいうと
BEFORE

   <div class="logo">
　　　　　　　　　　<img src="no_image.png" alt="#"></div>
   　　<div class="nav">
   　　<ul>
   　　 **<li>Portfolio</li>**
  　　 </ul>
   </div>
   </div>
   </header>
````````
AFTER

``````````<header>
   <div class="logo">
　　　　　　　　　　<img src="no_image.png" alt="#"></div>
   　　<div class="nav">
   　　<ul>
   　　 **<li><a href="#Portfolio">Portfolio</a></li>**
  　　 </ul>
   </div>
   </div>
   </header>
````````


BEFORE 

      <div class = "box1">
        ＊＊<h3>Portfolio</h3>＊＊
        <p>It is a long established ~~~~~</p>
      </div>



AFTER

      <div class = "box1">
        ＊＊<h3><a id ="Portfolio">Portfolio</a></h3>＊＊
        <p>It is a long established ~~~~~</p>
      </div>


これでページ内でリンク先に飛ばせるようになりました！！