ブログ運営のメモ帳

その日の作業とか気づいたことなどをメモッとくためのブログ

ページ内を移動(ジャンプ)するアンカーリンクの使い方を学ぶ

  

目次を使っている記事をよくみかけます。

いつ完成させるかはまだわからないけど、このさき書こうと考えている記事内で、クリックしたらその場所へ移動できるようにしたいと思っています。


ブログではまったく使っていなかったので、どういうタグを使っているのか?、なにか特別な記述が新たに作られたのか?など、ちゃんと確認したことがない。


以前、ホームページを作ったときに「a name」というタグを使って、ページ内で移動できるようにしていたんだけど、ブログでも普通に使えるんだろうか?と思ったので、調べてみた。


やろうとしているのは、企業サイトなどでみられる「FAQ」みたいなやつ。

ページの上部ではよくある質問がいくつか並び、下部のほうで答えが記述されている。知りたい質問をクリックすると、瞬時に答えの部分へ移動する・・・というもの。


どうやらHTML5では「a name」を使う方法は非推奨とされているようで、「id」を使ったほうがいいみたいだけど、こういったことには詳しくないので、自分の解釈があっているのかどうか、自信がない。


また、ページ内を移動させるためのリンクを設定することを、なんと呼んだらいいのかもよくわからなかったので、ついでにそちらも調べてみたけど「アンカーリンク」でいいのかな?

他にはページ内リンク、ページ内移動、ページ内ジャンプ・・・など、いくつか種類があった。「アンカーリンク」より、これらのほうがピンとくるというか、認識しやすそうな気がする。


さらにスムーズスクロールというものもあり、こちらは「jquery」なるものを利用するんだとか。ページ内のどの位置に移動したのか視覚的にわかりやすいけど、そこまで使いこなせそうにない。

 

記事でこういう見せ方をしたいと思って調べていただけなんだけど、新たに覚えることもあり、ちょっと疲れてしまいました。


とりあえず使えるようになっておきたいので、練習。ちゃんとできているといいんだけど。

ページ内上部へ移動