【id】ページ内を移動する「目次」や「先頭へ戻る」のようなページ内リンクの記述方法

こんにちは。ヒロユキです。

内部リンクや外部リンクなど、別ファイルへ移動するリンクの記述方法は以前の記事で解説しました。

今回は同じページの中で、項目から項目へと移動するような「ページ内リンク」の記述方法を紹介しますよ〜。

ページ内の中を移動するリンク

尾地ヒロユキ

ページの内容が多くなるとスクロールが大変だし、知りたい情報がどこにあるかわかんなくなるよね?

小松田くん

そうですね。「目次」から見出しへ移動できたり、ページの先頭へ戻るようなリンクが無いと不便ですね。

リンクを張るには「aタグ」

外部リンクや内部リンクを張るときには、aタグを記述しました。ページ内リンクも同じくaタグをつかうのです。

今回は「日本のむかしばなし」という簡単な架空ページを作ってみたいと思います。↓

実際のコードはこんな感じ。↓

<h1>日本のむかしばなし</h1>
 <ul>
  <li><a href="#momotarou">桃太郎</a></li>
  <li><a href="#kintarou">金太郎</a></li>
  <li><a href="#urasimatarou">浦島太郎</a></li>
  <li><a href="#sannennetarou">三年寝太郎</a></li>    
 </ul>

<h2 id="momotarou">桃太郎</h2>
<p>むかしむかしあるところに、おじいさんとおばあさんが住んでしました。</p>
<p>おじいさんは山へ芝刈りに、おばあさんは川へ洗濯に出かけました。</p>

<h2 id="kintarou">金太郎</h2>
<p>むかしむかしあしがら山の山奥に、金太郎という名前の男の子がいました。</p>
<p>金太郎は毎日、動物たちとすもうをして遊んでいました。</p>

<h2 id="urasimatarou">浦島太郎</h2>
<p>むかしむかしあるところに、浦島太郎という心やさしい漁師が住んでいました。</p>
<p>ある日のこと、浜辺で一匹の亀が子供達にいじめられているのを見つけました。</p>

<h2 id="sannennetarou">三年寝太郎</h2>
<p>むかしむかしあるところに、とてもなまけ者の男がいました。</p>
<p>息子は毎日おなかいっぱいにご飯を食べて、あとは寝てばかりです。</p>

<p><a href="#top">先頭へ戻る</a></p>

ページ内リンクの記述方法

それでは記述の工程ごとに見ていきましょう。

今回の「日本のむかしばなし」では、ページ内に4種類のh2見出しがあります。

  • 桃太郎
  • 金太郎
  • 浦島太郎
  • 三年寝太郎

なのでページ内リンクをつかって、各h2見出しのタイトル部分へ移動できるようにしたいと思います。

まずは、ベースになるページの内容を記述します。↓

<h1>日本のむかしばなし</h1>
  
<h2>桃太郎</h2>
<p>むかしむかしあるところに、おじいさんとおばあさんが住んでしました。</p>
<p>おじいさんは山へ芝刈りに、おばあさんは川へ洗濯に出かけました。</p>

<h2>金太郎</h2>
<p>むかしむかしあしがら山の山奥に、金太郎という名前の男の子がいました。</p>
<p>金太郎は毎日、動物たちとすもうをして遊んでいました。</p>

<h2>浦島太郎</h2>
<p>むかしむかしあるところに、浦島太郎という心やさしい漁師が住んでいました。</p>
<p>ある日のこと、浜辺で一匹の亀が子供達にいじめられているのを見つけました。</p>

<h2>三年寝太郎</h2>
<p>むかしむかしあるところに、とてもなまけ者の男がいました。</p>
<p>息子は毎日おなかいっぱいにご飯を食べて、あとは寝てばかりです。</p>
ブラウザで見たページ↑

リンクでつかう「目次」を作る

次にページ先頭の「目次」となる部分を、ulタグをつかった「箇条書きリスト」で表現します。↓

<h1>日本のむかしばなし</h1>
 <ul>
  <li>桃太郎</li>
  <li>金太郎</li>
  <li>浦島太郎</li>
  <li>三年寝太郎</li>
 </ul>
ブラウザで見たページ

ページの内容が完成したので、ここからリンクを張っていきます。

<h1>日本のむかしばなし</h1>
 <ul>
  <li>桃太郎</li>
  <li>金太郎</li>
  <li>浦島太郎</li>
  <li>三年寝太郎</li>
 </ul>

<h2>桃太郎</h2>
<p>むかしむかしあるところに、おじいさんとおばあさんが住んでしました。</p>
<p>おじいさんは山へ芝刈りに、おばあさんは川へ洗濯に出かけました。</p>

<h2>金太郎</h2>
<p>むかしむかしあしがら山の山奥に、金太郎という名前の男の子がいました。</p>
<p>金太郎は毎日、動物たちとすもうをして遊んでいました。</p>

<h2>浦島太郎</h2>
<p>むかしむかしあるところに、浦島太郎という心やさしい漁師が住んでいました。</p>
<p>ある日のこと、浜辺で一匹の亀が子供達にいじめられているのを見つけました。</p>

<h2>三年寝太郎</h2>
<p>むかしむかしあるところに、とてもなまけ者の男がいました。</p>
<p>息子は毎日おなかいっぱいにご飯を食べて、あとは寝てばかりです。</p>

id属性で識別子をつける

まずはリンク先となる、h2見出しの「桃太郎」に、id属性(!)を追記します。

<h2 id="">桃太郎</h2>

id属性

識別子を与える属性。id(identification)は、識別子という意味。

識別子は自由な文字列を付けることができます。今回は「momotarou」とします。↓

<h2 id="momotarou">桃太郎</h2>
小松田くん

id属性の属性値には、「#(パウンド記号)」は必要ありません。

hrefの属性値は「識別子」

次に箇条書きリストの「桃太郎」から、h2見出しの「桃太郎」に移動するリンクを書いてみましょう。

箇条書きリストの「桃太郎」に、aタグを追記します。

<li><a>桃太郎</a></li>

aタグのリンク先が必要なので、href属性でリンク先を指定します。↓

<li><a href="">桃太郎</a></li>

今回は外部リンクや内部リンクのように、別のファイルへ移動するわけではありません。なので、属性値はファイル名ではなく「識別子(!)」をつかいます。

識別子

たくさんの対象の中からひとつを特定するために用いられる「名前」「記号」「数字」などのこと。hrefの属性値では「#(識別子)」となる。

href属性の属性値には、先ほどの「momotarou」を指定します。hrefの属性値では、識別子の前に「#(パウンド記号)」を付けるのです。

<li><a href="#momotarou">桃太郎</a></li>
尾地ヒロユキ

識別子に「#(パウンド記号)」を付けるの忘れちゃダメだぞ!

全体を見るとこうなります。↓

<h1>日本のむかしばなし</h1>
 <ul>
  <li><a href="#momotarou">桃太郎</a></li>
  <li>金太郎</li>
  <li>浦島太郎</li>
  <li>三年寝太郎</li>
 </ul>

 <h2 id="momotarou">桃太郎</h2>
 <p>むかしむかしあるところに、おじいさんとおばあさんが住んでしました。</p>
 <p>おじいさんは山へ芝刈りに、おばあさんは川へ洗濯に出かけました。</p>
ブラウザで見たページ↑

では、各見出しに次のような識別子を付けた場合、リストアイテムからの「ページ内リンク」はどういった記述になるでしょう?↓

識別子
  • 桃太郎→momotarou
  • 金太郎→kintarou
  • 浦島太郎→urasimatarou
  • 三年寝太郎→sannennetarou
正解
<h1>日本のむかしばなし</h1>
 <ul>
  <li><a href="#momotarou">桃太郎</a></li>
  <li><a href="#kinntarou">金太郎</a></li>
  <li><a href="#urasimatarou">浦島太郎</a></li>
  <li><a href="#sannennetarou">三年寝太郎</a></li>
 </ul>

<h2 id="momotarou">桃太郎</h2>
<p>むかしむかしあるところに、おじいさんとおばあさんが住んでしました。</p>
<p>おじいさんは山へ芝刈りに、おばあさんは川へ洗濯に出かけました。</p>

<h2 id="kintarou">金太郎</h2>
<p>むかしむかしあしがら山の山奥に、金太郎という名前の男の子がいました。</p>
<p>金太郎は毎日、動物たちとすもうをして遊んでいました。</p>

<h2 id="urasimatarou">浦島太郎</h2>
<p>むかしむかしあるところに、浦島太郎という心やさしい漁師が住んでいました。</p>
<p>ある日のこと、浜辺で一匹の亀が子供達にいじめられているのを見つけました。</p>

<h2 id="sannennetarou">三年寝太郎</h2>
<p>むかしむかしあるところに、とてもなまけ者の男がいました。</p>
<p>息子は毎日おなかいっぱいにご飯を食べて、あとは寝てばかりです。</p>

正解はこうですね。↑

各見出しに、id属性で「識別子」をつけて、リストアイテムからのリンクでこれを指定します。

これで、ページ内リンクの記述が完成しました。

ページ内リンクでは、リンク先が「ページの先頭に来る位置」に移動します。なので、ページにある程度の高さがないと実際に移動したかどうかわかりません。

ページにある程度のボリュームが出てきてから「ページ内リンク」の記述を検討しましょう。

ページの先頭へ「戻る」リンク

ページの最後から先頭へ戻りたい時、画面スクロールで戻るのは大変だし面倒です。

なので通常のWebページでは、ページの最後(フッター)などに「ページの先頭へ戻る」ためのリンクが用意されています。

それでは、先頭へ戻るリンクの書き方を見てみましょう。まず、リンクを張りたい文字列をpタグで記述します。今回は「先頭へ戻る」ですね。

<p>先頭へ戻る</p>

次にpタグの「先頭へ戻る」を、aタグで囲みます。

<p><a>先頭へ戻る</a></p>

aタグにはリンク先が必要なので、href属性でリンク先を指定します。↓

<p><a href="">先頭へ戻る</a></p>

ページの先頭へ戻る場合も、別のファイルへの移動じゃないので属性値に「識別子」を使います。

先頭へ戻る場合の識別子は「#top」です。

<p><a href="#top">先頭へ戻る</a></p>
小松田くん

先頭へ戻る時の識別子は「#」だけでもいいんですよ。

ページ内リンクの記述方法のまとめ

  • リンク先にしたい「hタグ」や「pタグ」に、id属性で「識別子」を付ける。
    例:<h2 id=”(識別子)”>(リンク先)</h2>
  • リンクを張りたい文字列を、aタグで囲んで、href属性を記述する。
    例:<a href=””>(リンクを張りたい文字列)</a>
  • hrefの属性値は、「#」の後にリンク先に付けた「識別子」を記述。
    例:<a href=”#(識別子)”>(リンクを張りたい文字列)</a>
  • ページの先頭へ戻るリンクは、識別子を「top」にする。
    例:<a href=”#top“>(リンクを張りたい文字列)</a>

内容が多いページでは特に「ページ内リンク」が大切です。ユーザーが目的の情報へ快適にたどり着けるように、記述方法を習得しておきましょう。

それじゃまた。ヒロユキでした。

気に入ったらシェアしてね
ABOUT US
尾地ヒロユキOji Hiroyuki
Webページを作ったり、アプリやゲームを作ったり、作業の効率化だってできちゃうプログラミング。なのに「なんだかむずかしそう」「自分にはムリだよ」って諦めちゃうのはもったいない!プロじゃなくてもプログラミングしませんか?このブログ「つみきのーと」では、知識ゼロからのスタートを応援します。Twitter ⇒「PC豆知識」Instagram ⇒「Macショートカットキー」Pinterest ⇒「図解イラスト」を発信中。そっちもcheckだぞ♪