HTML

HTMLでページ内リンク付き目次を実装【超初心者でも余裕】

更新日:

こんにちは、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編集で実装可能です

それでは、また

参考資料

-HTML
-

Copyright© 初心者のためのプログラミング独学ブログ , 2020 All Rights Reserved Powered by STINGER.