どうも7noteです。微妙に違うaタグの遷移先の設定方法について解説
以下の4つの指定方法について解説していきます。
- ①
href="./"（現ディレクトリのルートに遷移） - ②
href=""（現在のページに遷移） - ③
href="#"（現在のページのTOPに遷移） - ④
href="#!"（ページ遷移をしない）
①href="./" （ルートに遷移）
ルートに遷移します。勘違いされやすいですが、現在のページに遷移するわけではありません。わかりやすいように問題にしてみます。
前提：ディレクトリ構造は以下とする。
index.html
/news/index.html
/news/001.html
問題１：/news/index.htmlからhref="./"ページ遷移した場合、どのページに遷移するか？
答え：/news/index.html
問題２：/news/001.htmlからhref="./"でページ遷移した場合、どのページに遷移するか？
答え：/news/index.html
「./」の設定は現ディレクトリのルートに遷移する。ということです。
たとえ/news/10000.htmlからリンクしたとしても、/news/のルートファイル、つまり/news/index.htmlに遷移します。
②href="" （現在のページに遷移）
/news/001.htmlからhref=""にリンクしても/news/001.htmlのままです。
③href="#" （現在のページのTOPに遷移）
/news/001.htmlからhref=""にリンクしても/news/001.htmlのままですが、強制的に現ページの一番上までスクロールされます。
ページの最下部に設置するような「TOPへ戻る」ボタンなどはhref=""が設定される場合が多いです。
- ④
href="#!"（ページ遷移をしない）
使う機会は少ないですが、あえてページ遷移をさせたくない時はhref="#!"を指定することでページ遷移を無効化させることができます。
まとめ
- ①
href="./"（現ディレクトリのルートに遷移） - ②
href=""（現在のページに遷移） - ③
href="#"（現在のページのTOPに遷移） - ④
href="#!"（ページ遷移をしない）
「./」や「../」の違いを理解していても、油断すると指定ミスなどが起こりやすいところです。常に自分がどの階層にあるどのファイルを触っていて、どこにリンクさせたいのかを把握する癖を持っておきましょう。
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ