どうも、わくわく（@wakuwaku_saaan）です。
ブログを書いていると、h2の順番を変えるわけにはいかない、でも先にもう少し後ろの部分を読んでほしい…という時がありますよね。
今回はページ内ジャンプ、アンカーリンクの使い方をまとめています。
アンカーリンクの構図
<a href=”#アンカー名“>文字・画像</a> （ …① ）
↑ここから
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
<a name=”アンカー名”>文字</a> あるいは <要素 id=”アンカー名“> （ …② ）
↑ここに飛びます
要するに、青字のタグさえ使うことができれば、①の場所から②まで、ひょいっとジャンプすることができるのです。
②→①の順で、タグの作成手順を説明していきます。
アンカーリンクの作成手順
②目印（アンカー）を作る
目印（アンカー）を作ります。
ページ内の好きな場所または、特定の文字にアンカー名をつけましょう。
基本的には、<a name=”アンカー名”>文字</a>を使うことが多いと思いますが、要素それぞれにid属性を使って、<要素 id=”アンカー名”>という使い方もできます。
要素idの例）：h2など
①目印（アンカー）にとばす
<a href=”#アンカー名“>文字・画像</a>を記載したところから、<a name=”アンカー名”>文字</a>や<要素 id=”アンカー名“>でアンカー名をつけた場所に、ジャンプできます。
という人は、一旦例を見てください^^
HTMLも併せて載せているので、コピペしながら実際に使ってみると理解しやすいと思います。
例
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
＜HTML＞
<a href=”#お好きなアンカー名”>ここからジャンプ</a>
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
〜〜〜〜文章〜〜〜〜
<a name=”お好きなアンカー名”></a>ここにジャンプ
あとがき
まとめ記事などを書いていると、熱が入ってしまって（？）ついつい文章が長くなってしまいますよね。
アンカーリンクを使いこなせば、長い文章も読みやすくなります。
うまく機能しない場合、#のつけ忘れはないか、アンカー名が一致しているかどうか、タグの閉じ忘れはないかを確認しましょう。
仕組みがよくわからない頃は難しかったですが、使ってみると意外と簡単だったのでぜひ試してみてください^^
最後までご覧いただき、ありがとうございます。
一瞬のわくわくが、連続する毎日を。
