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