[Web初心者でも簡単] HTMLで目次を作ってみよう(HTML実用編4)

フリーランス
本記事はこんな方にオススメ

「Webの初心者の方」

「目次のHTMLを作成したい方」

「HTMLの学習をしたい方」

本記事の内容

ブログやサイト等でよく見かける目次機能。

単に項目を並べたものもあれば、目次をクリックすると記事まで飛んでくれるものまで、機能や表示は様々です。

今回はweb初心者が押さえておくと便利な3つの公式を使って、プロ顔負けの目次を作っていきます。

そのために踏むステップはなんと3つだけ。

HTMLを学びたい方は是非この機会に身につけちゃってください♩

[Web初心者でも簡単] HTMLで目次を作ってみよう(HTML実用編4)

スポンサーリンク

今回の記事のゴール

今回作る目次はこんなもの

今回作る目次はこの様なものです。

この記事を読み進めると、Web初心者の方でも上の様な目次を作ることができます。

この目次は、目次の項目をクリックすると自動的に該当記事内容に移動してくれる機能も付いています。

今回の目次作りで身につく知識

  1. 見出しの作り方
  2. リストの作り方
  3. リンクの貼り方
  4. 目次の項目をクリックすると該当内容に移動する機能の付け方

見出し作りから始めよう

見出しのタグと公式

見出し作成のHTML

<hナンバー>○○</hナンバー>

hの後のナンバーは、1~6の数字が入ります。

また、見出しのタイトルとして表示したい文字は〇〇の部分に書きます。

詳しく見出しの作り方を知りたい、または復習したいという方はこちらの記事にまとめていますのでご参考ください♩https://jazziblog.com/make-a-headline-in-html

目次作成のどこに見出しのHTMLを使うの?

目次作成のHTMLの以下の様な部分で今回の見出しのタグを使います。

<h1>記事のタイトル</h1>

~

<h2 id=”id名①”>目次タイトル①</h2>
<p>本文</p>
<hr>
<h2 id=”id名②”>目次タイトル②</h2>
<p>本文</p>
<hr>
<h2 id=”id名③”>目次タイトル③</h2>
<p>本文</p>
<hr>
<h2 id=”id名④”>目次タイトル④</h2>
<p>本文</p>
<hr>
<h2 id=”id名⑤”>目次タイトル⑤</h2>
<p>本文</p>
<hr>
<h2 id=”id名⑥”>目次タイトル⑥</h2>
<p>本文</p>

箇条書きリストを作ろう

リストの表示は箇条書きリストと、数値表示のリストと、大きく分けて2つあります。

今回の目次づくりでは箇条書きリストを使用して進めていきます。

箇条書きリストのタグと公式

ではここで、箇条書きリストのタグと公式をご紹介します。

箇条書きリスト

<ul>
<li>○○</li>
</ul>

<li>○○</li>の中身である○○の部分に文章を入力することでリストを自由に作ることができます。

詳しくリストの作り方を知りたい、または復習したいという方はこちらの記事にまとめていますのでご参考ください♩https://jazziblog.com/make-a-list-in-html

目次作成のどこに箇条書きリストのHTMLを使うの?

<ul>
<li><a href=”#id名①”>目次タイトル①</a></li>
<li><a href=”#id名②”>目次タイトル②</a></li>
<li><a href=”#id名③”>目次タイトル③</a></li>
<li><a href=”#id名④”>目次タイトル④</a></li>
<li><a href=”#id名⑤”>目次タイトル⑤</a></li>
<li><a href=”#id名⑥”>目次タイトル⑥</a></li>
</ul>

リンクを貼ろう

リンクを貼るタグと公式

<a herf=”リンク先の名前”>クリックする時のテキスト内容</a>

詳しくリンクの貼り方を知りたい、または復習したいという方はこちらの記事にまとめていますのでご参考ください♩https://jazziblog.com/put-a-link-in-html

目次作成のどこにリンク作成のHTMLを使うの?

<a href=”#id名①“>目次タイトル①</a>
<a href=”#id名②“>目次タイトル②</a>
<a href=”#id名③“>目次タイトル③</a>
<a href=”#id名④“>目次タイトル④</a>
<a href=”#id名⑤“>目次タイトル⑤</a>
<a href=”#id名⑥“>目次タイトル⑥</a>

<h2 id=”id名①“>目次タイトル①</h2>
<h2 id=”id名②“>目次タイトル②</h2>
<h2 id=”id名③“>目次タイトル③</h2>
<h2 id=”id名④“>目次タイトル④</h2>
<h2 id=”id名⑤“>目次タイトル⑤</h2>
<h2 id=”id名⑥“>目次タイトル⑥</h2>

黄色のアンダーマーカーの部分はid属性といって、名前を決めるのに使われます。

今回の場合<a href=”#id名①“>は、idの名前が「id名①」の部分に移動するリンクのような指示を出しています。

余談ですが、HTMLを入力する時、#はidと同じ意味です。なので『#id名①』という表現は、『id=”id名①』という表現と同義です。

そしてその移動先(リンク先のようなもの)を探してみると、idの名前が「id名①」の部分が、<h2 id=”id名①“>の中にあります。

要するに<a href=”#id名①“>は、<h2 id=”id名①“>の所まで移動させる指示を出しているという事です。

そのため『<a href=”#id名①“>目次タイトル①</a>』のHTMLが隠れている目次タイトル①をクリックすると、

『<h2 id=”id名①“>目次タイトル①</h2>』の目次タイトル①まで移動する機能が働きます。

目次のクリックで記事に移動する機能をつける

必要な3つのタグと公式

これまでにご紹介してきた3つのHTMLタグと公式をミックスすることで、目次のクリックで記事に移動する機能をつけることができます。

見出し作成のHTML

<hナンバー>○○</hナンバー>

箇条書きリストのHTML

<ul>
<li>○○</li>
</ul>

リンク作成のHTML

<a herf=”リンク先の名前”>クリックする時のテキスト内容</a>

見出し/箇条書きリスト/リンクの3つタグと公式をミックスする

例えばこんな目次とクリックで移動できるページを作るとき、

HTMLはこの様になります。

少し分かりやすくするために、HTMLの骨組みのみでまとめてみました。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>ウィンドウ・タブの表示名</title>
</head><body>
<h1>記事のタイトル</h1>
<p>タイトル本文</p><ul>
<li><a href=”#id名①”>目次タイトル①</a></li>
<li><a href=”#id名②”>目次タイトル②</a></li>
<li><a href=”#id名③”>目次タイトル③</a></li>
<li><a href=”#id名④”>目次タイトル④</a></li>
<li><a href=”#id名⑤”>目次タイトル⑤</a></li>
<li><a href=”#id名⑥”>目次タイトル⑥</a></li>
</ul><hr><h2 id=”id名①”>目次タイトル①</h2>
<p>本文</p>
<hr>
<h2 id=”id名②”>目次タイトル②</h2>
<p>本文</p>
<hr>
<h2 id=”id名③”>目次タイトル③</h2>
<p>本文</p>
<hr>
<h2 id=”id名④”>目次タイトル④</h2>
<p>本文</p>
<hr>
<h2 id=”id名⑤”>目次タイトル⑤</h2>
<p>本文</p>
<hr>
<h2 id=”id名⑥”>目次タイトル⑥</h2>
<p>本文</p>
<hr>
</body>
</html>

コメント

タイトルとURLをコピーしました