【コピペOK】目次をhtmlで作成する方法【記事の途中に飛ばす方法】

シロウ

こんにちは、しろうです！

今回の記事ではhtmlで目次を作る方法をご紹介していきます。

そのため、htmlで目次を作成する方法を知っておいて損はありません。

そして、今回の記事ではコピペでサクッと作成できるHTMLの目次ということで、誰でも簡単にすぐにできる方法を解説します！

ぜひ、この機会に知っておきましょう。

＊今から↑こんな感じのやつを作っていきます。

【コピペするだけ】htmlで目次を作成する方法

まずは上記画像のような『デザインなしの簡易的な目次』を作成する方法をご紹介します。

<a href="#anker1">①ここに目次</a>
<a href="#anker2">②ここに目次</a>
<a href="#anker3">③ここに目次</a>
<a href="#anker4">まとめ</a>

<h2 id="anker1">①ここに見出し２</h2>
<h2 id="anker2">②ここに見出し２</h2>
<h2 id="anker3">③ここに見出し２</h2>
<h2 id="anker4">まとめ</h2>

これをコピペして【ここに目次】と【ここに見出し】の箇所に好きな文字を入れれば完成です。
＊すいません、画像では「①」とか表示されていませんが、わかりやすくするために上記のコードでは「①」とか「②」を書いています。適宜必要ならそのままで、不要なら消してくださいm(_ _)m

シロウ

簡単ですね

入れ子構造の目次を作成する方法

次は上記画像のように『入れ子構造の目次』を作成する方法を解説します！

<a href="#anker1">①ここに目次２</a>
→<a href="#anker11">⑪ここに目次３</a>
→<a href="#anker12">⑫ここに目次３</a>
→<a href="#anker13">⑬ここに目次３</a>
<a href="#anker2">②ここに目次２</a>
→<a href="#anker21">㉑ここに目次３</a>
→<a href="#anker22">㉒ここに目次３</a>
→<a href="#anker23">㉓ここに目次３</a>
<a href="#anker3">③ここに目次２</a>
→<a href="#anker31">㉛ここに目次３</a>
→<a href="#anker32">㉜ここに目次３</a>
→<a href="#anker33">㉝ここに目次３</a>
<a href="#anker4">まとめ</a>

<h2 id="anker1">①ここに見出し２</h2>
<h3 id="anker11">⑪ここに見出し３</h3>
<h3 id="anker12">⑫ここに見出し３</h3>
<h3 id="anker13">⑬ここに見出し３</h3>
<h2 id="anker2">②ここに見出し２</h2>
<h3 id="anker21">㉑ここに見出し３</h3>
<h3 id="anker22">㉒ここに見出し３</h3>
<h3 id="anker23">㉓ここに見出し３</h3>
<h2 id="anker3">③ここに見出し２</h2>
<h3 id="anker31">㉛ここに見出し３</h3>
<h3 id="anker32">㉜ここに見出し３</h3>
<h3 id="anker33">㉝ここに見出し３</h3>
<h2 id="anker4">まとめ</h2>

かなり長いですが、こんな感じになります！

少し詳しく解説

ここでは「コードの意味を理解したい！」という方向けに少し詳しく解説していきます。

実際に使用しているタグは上記の赤色のタグです。

目次には【<a href=”#名前”>　</a>】を使い、
リンクの飛び先には【id=”名前”】を使用します。

注意点は下記の3つ。

目次以外で記事内リンクを作成する方法

今説明したことを応用すると目次以外でも記事内リンクを作成することが可能です。

例えば「こちら」をクリックしてみると、

「ここに飛ぶ」という感じです。

この時のコードは下記の通り。

<a href="#anker0">こちら</a>

<p id="anker0">「ここに飛ぶ」という感じです。</p>

こんな感じで【<a href=”#名前”>　</a>】の「名前」でリンクの飛び先を指定して、【id=”名前”】の「名前」と一致したところに飛んでくるという感じです。

注意点

このときに重要なのが先ほどは【<h2 id=”名前”>ここに見出し２</h2>】だったのが【<p id=”名前”>「ここに飛ぶ」という感じです。</p>】になっている点。

<h2>とは「見出し２」を意味するタグであるため <h2 id=”名前”> としてしまうと、見出し2になってしまいます。

それに対して<p>は「段落（パラグラフ）」を意味するタグなので <p id=”名前”> にすれば文章を飛び先にすることができます！

こんな感じで、慣れれば誰でも簡単に目次を作成することはできます。

「Add Quicktag」にでも保存しておいて、テンプレートとして利用することをオススメします。

ということで、今回はhtmlの目次をコピペで作成する方法でした！

終わりですヽ(´▽｀)/

シロウ

NFT・仮想通貨投資家 / エンジニア

TwitterInstagramYouTubeLINEContact

仮想通貨・NFTに400万以上投資しています。

本業エンジニア・副業ブロガー。

ブログ最高月80万円。累計200万以上。