2017.04.26【初心者向け】HTMLで目次を作る方法と陥りがちなミス

37_720

目次を作りたいけど、HTMLタグがイマイチ分からない



こんにちは!ライターのアイリです。先日、少し長めの記事を書いた際に
「長めの記事は、索引とか目次を作った方が見やすいよ」というアドバイスをいただきました。私はまだ、目次のようなページ内リンクを使ったことがないのでGoogleで検索。。。

そして見つけました!一般的に長めの記事でよく用いられるリンクはこれ。

スクリーンショット 2017-04-26 18.58.01

目次のような項目と、小見出しに飛べるリンクです。
自分の興味のあるカテゴリーや、知りたい情報がすぐ得られて便利ですよね!

how to形式の記事や、約4000字以上の分量のある記事は、見出しも多く読者が本当に欲しい情報がすぐに分かりにくくなってしまいます。


そこで今回は、初心者ブロガーor初心者ライターが記事ですぐに使える“目次の作る為のHTMLタグ”をご紹介します。

実際に私が起こした初歩的間違いも、一緒に紹介しますので、駆け出しのライター/ブロガーさんの役に立てばいいなと願っています。




【目次】
目次から文頭に飛ばす方法
  実際のタグ
飛ぶリンク先(見出し)のタグについて
  リンクタグ作成時の注意点
目次のタグについて
  目次のリンクを作成する時の注意点
実際に使ってみると





目次から文頭に飛ばす方法



では早速タグの紹介を行なっていきたいと思います!
初心者さんにも分かりやすく書いていきますね。


実際のタグ



【目次】
<a href="# 名前 "></a>

【対応する文章】
<h2 id=" 名前 "></h2>



この二つのタグを使用していきます。
ページの上部に使用するのが【目次】のタグ、見出しの<h2>・<h3>タグに使用するのが【飛ぶリンク先】のタグです。

【飛ぶリンク先】のタグは、タイトルによく使う<h2></h2>のタグの中に組み込んで使用します。



飛ぶリンク先(見出し)のタグについて



例えば


<h2>アンパンを作る</h2>

というタイトルにリンクを飛ばしたい時は、元々のタイトルタグに

<h2 id="ap1">アンパンを作る</h2>

という様にタグを追加します。

タグの中の"名前"というものは、実際にはアンカーと呼びます。タイトルの見出しに名前をつけてリンクを作成していくので、ここではイメージしやすい様に名前と表記しました。



リンクタグ作成時の注意点



リンクタグ作成時の注意点は大きく分けて2つ!

  • 名前に使えるのは半角英数のみ

  •    
     →今回のタグだけでなくHTMLタグに共通することなのですが、基本的にタグは半角英数のみで表記します。ひらがな・カタカナなどが使えないのは大前提ですが、うまくリンクが動かない時には、文字が全角になっていないかどうかを確認しましょう。


        
  • スペースは使用不可。_を入れて見やすく!


  •  →タグの中にはスペースを入れることができません。これは私がしたミスなのですが...

    <h2>アンパンを作る</h3>
    <h3>必要な素材</h3>
    <h3>必要な器具</h3>
    <h3>手順</h3>

    という見出しに対して、

    <h2 id="ap">アンパンを作る</h2>
    <h3 id="ap 1">必要な素材</h3>
    <h3 id="ap 2">必要な器具</h3>
    <h3 id="ap 3">手順</h3>


    という様に作成してしまいました。


    複数見出しに名前をつける時、見やすくする方法としてアンダーバーを活用することをオススメします。

    先ほどのタグを使って説明すると、

    <h2 id="ap">アンパンを作る</h2>
    <h3 id="ap_1">必要な素材</h3>
    <h3 id="ap_2">必要な器具</h3>
    <h3 id="ap_3">手順</h3>




    目次のタグについて




    <a href="# 名前 "></a>


    目次のタグは上記のものです。

    タイトルタグを作成したら、目次を作成していきましょう。


    目次のリンクを作成する時の注意点



    注意することは1つ!

  • 目次のリンクには"#"がつく

  •  →目次のリンクでは、タイトルで名付けたものと対応させていきます。その際に、"#"
    を入れることを忘れない様にしましょう。タイトルタグには入っていないので、私はここでつまずいてしました。



    【目次】
    <a href="#ap">アンパンを作る</a>
      <a href="#ap_1">必要な食材</a>
      <a href="#ap_2">必要な器具</a>
      <a href="#ap_3">手順</a>



    【タイトルタグ】
    <h2 id="ap">アンパンを作る</h2>
    <h3 id="ap_1">必要な食材</h3>
    <h3 id="ap_2">必要な器具</h3>
    <h3 id="ap_3">手順</h3>





    実際に使ってみると



    下記のタイトルは、私が実際に記事の中で使用したタグです。


    【目次】

    ・<a href="#wo_1">将来性のない大学生のバイト事情</a>
      <a href="#wo1">大学生は週3でバイトが主流</a>


    【飛ぶリンク先】

    <h2 id="wo_1">将来性のない大学生のバイト事情</h2>

     <h3 id="wo1">大学生は週3でバイトが主流</h3>

    このようになります。

    このリンクを使った記事はこちらから読めます。どの様に動くかはここで確認してみてくださいね。

    この記事を書いた人

    津吹 アイリ

    東京学芸大学3年のTrunk専属ライター。陸上部だけど足は遅い。膝が凄くゆるい。