どうも7noteです。微妙に違うaタグの遷移先の設定方法について解説

以下の4つの指定方法について解説していきます。

①`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に遷移します。

/news/001.htmlからhref=""にリンクしても/news/001.htmlのままです。

/news/001.htmlからhref=""にリンクしても/news/001.htmlのままですが、強制的に現ページの一番上までスクロールされます。

ページの最下部に設置するような「TOPへ戻る」ボタンなどはhref=""が設定される場合が多いです。

使う機会は少ないですが、あえてページ遷移をさせたくない時はhref="#!"を指定することでページ遷移を無効化させることができます。

「./」や「../」の違いを理解していても、油断すると指定ミスなどが起こりやすいところです。常に自分がどの階層にあるどのファイルを触っていて、どこにリンクさせたいのかを把握する癖を持っておきましょう。

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ