ランダムの備忘録

ブログをやってて覚えた過程を忘れないために!

今度は「目次」をHTMLで作る!

前回、CSSではうまくいった。だけどあれだと個別に作れない。

大まかな「目次」だけならあれでいいんだけど用途別に違うのを使いたい!

CSSで変えちゃうと全部が変わってしまうので・・・

今回は「HTML」で作ってしまおうってこと!

⇩は前回CSSで作った目次!

見出し部分の作成

いつものやつにちょっと付け加える。

<h4>たとえばこの部分</h4>

<h4 id="01">たとえばこの部分</h4>

id="01"を付ける。「01」部分は名前なので何でもOK。

OKだけど同じページ内で同じ名前は使用不可!

飛びたい見出しに

今度は飛びたい見出しの作成!

<a href="#01">たとえばこの部分</a>

#の付け忘れに注意!

そしてこれらを使って目次の作成!

目次の作成!

分かりやすくHTML部分を載せる!見出しは⇧の3つ!

<h4 id="01">見出し部分の作成</h4>
<h4 id="02">飛びたい見出しに</h4>
<h4 id="03">目次の作成!</h4>


肝心の目次部分の作成!

<p>目次</p>
<ul>
<li><a href="#01">見出し部分の作成</a></li>
<li><a href="#02">飛びたい見出しに</a></li>
<li><a href="#03">目次の作成!</a></li>
</ul>


そして作成されたのが⇩

目次


まぁ・・・あれだよね。

枠も無いからそれらを次で追加!

本当に最低限なので追加!

ここから枠などを作って多少見やすくする!

<div style="border: 1px solid #000; padding: 10px;">
<div style="text-align: center;"><strong>目次</strong></div>
<hr />
<ul>
<li><a href="#01">見出し部分の作成</a></li>
<li><a href="#02">飛びたい見出しに</a></li>
<li><a href="#03">目次の作成!</a></li>
</ul>
</div>


そして作成されたのが⇩


ま、こんなもんでしょ!

枠の変更などはHTML部分を変えればもちろん変わる!

他にも色々追加しようと思えばいくらでも出来る!

普段使うのはCSS。用途が違う場合はHTMLで作成すればいい!

これで違う目次を同じページ内で作成することが出来る!

そんなわけで今回の目的は終了!