ブログや記事系コンテンツを多く掲載しているサイトの場合、ユーザビリティーを高めるためにも目次を使っている例が多いです。
その際は見出しタグを利用して目次を生成するケースが多いと思いますが、目次のリンク先に設定するのがページ内リンク「アンカーリンク」です。
今回は、アンカーリンクの使い方をまとめることで、正しくページ内リンクを貼るための実装を覚えましょう。
サイトのメンテナンス性を考慮したリンク先URLの指定方法(相対パスvs絶対パス)
目次
アンカーリンク先にid属性かname属性を置き、アンカーリンク元では「#id」へリンクする
アンカーリンクの使い方は、非常に簡単です。
<h2 id="anchor1">アンカーリンク元１</h2> <h2 name="anchor2">アンカーリンク元２</h2> <a href="#anchor1">アンカーリンク先１はこちら</a> <a href="#anchor2">アンカーリンク先２はこちら</a>
上記のように、id属性かname属性を付与したhtmlタグへ、#を付けたhref属性で指定すればページ内リンクになります。
リンク先URLのパス(path)で上や下の階層(ディレクトリ)を表す際の書き方はUNIXコマンドで覚える
id属性は１ページ１つしか同一のものは使えない
気をつけて欲しいのが、id属性は同一のものを同じページのソースコード内に１つしか使えないということです。
これはHTML5,CSS3のルールであるため、反することはできません。
別ページへアンカーリンクを飛ばしたい場合は「リンク先URL#属性名」で指定すればOK
ページ内でのリンクに限らず、別ページの意図した部分にリンクしたい場合、「/html/index.html#anchor」みたいに指定すれば大丈夫です。
SEO的に何か問題あるということも無いので、リンクして大丈夫なので安心して使って大丈夫です。
