こんにちは、Shinyaです
ブログとか見てると、目次にページ内リンクが設定されてて便利なときありますよね
今回はそのリンク機能付き目次を実装する方法を紹介します
目次から見出しに飛ぶイメージですね
分かりやすいので、目次の例を出しますが、目次でなくても何にでも応用できます
サンプルコード
これの中身を説明していきます
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>目次サンプル</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<a href="#anker1">パート１</a><br />
<a href="#anker2">パート２</a><br />
<a href="#anker3">パート３</a>
<h1 id="anker1">パート１</h1>
<h1 id="anker2">パート２</h1>
<h1 id="anker3">パート３</h1>
</body>
</html>目次の部分
リンク付きの目次の部分はaタグを利用して書きます
<a href="#anker1">パート１</a><br />
<a href="#anker2">パート２</a><br />
<a href="#anker3">パート３</a>ポイントはリンク名の先頭に＃を付けることです
＃を付けないとページ内リンクと認識されずエラーになります
ちなみにリストを利用するとこうなります
<ul>
<li><a href="#anker1">パート１</a></li>
<li><a href="#anker2">パート２</a></li>
<li><a href="#anker3">パート３</a></li>
</ul>見出しの部分
見出し部はidを利用します
aタグのリンク名から＃を除いた形にすればOKです
<h1 id="anker1">パート１</h1>
<h1 id="anker2">パート２</h1>
<h1 id="anker3">パート３</h1>これだけです（笑）
試しにサンプルコードを適当なエディタにコピペしてHTMLファイルとして保存し、chromeなどのブラウザにドラッグ&ドロップして試してみてください
動きが分かると思います
以上がページ内リンク付き目次の実装方法でした
ちなみにWordPressでもHTML編集で実装可能です
それでは、また