ホームページ 同一ページ内リンクの貼り方｜ページ途中、上部、下部へ移動する方法

ホームページを作成していると、「詳しくはこちら」などのリンクをクリックしたときに、同じページ内にある特定の見出しやコンテンツまで移動させたいことがあります。

このように、同じページ内の特定の場所へ移動するリンクを「同一ページ内リンク」といいます。

同一ページ内リンクでは、リンクをクリックする場所と、クリックしたあとに移動する場所を指定します。
HTML では、リンク元の aタグ に移動先を指定し、移動先の要素に id を設定するのが基本的な書き方です。

この仕組みを使うことで、ページ内の文章やボタンから特定の見出しへ移動させたり、ページ上部の目次から目的のコンテンツへ移動させたり、「ページトップへ戻る」リンクを作ったりできます。

ここでは、HTML 初心者の方に向けて、同一ページ内リンクの基本的な書き方から、ホームページでよく使われる具体的なパターンまで、サンプルコードを使って分かりやすく解説します。

同一ページ内リンクの基本的な書き方

同一ページ内リンクを作るには、「クリックする場所（出発点）」と「移動する場所（到着点）」の2つに、それぞれ HTMLコード を書き加える必要があります。

仕組みはシンプルで、到着点に「名前」を付け、出発点からその「名前」を指定するだけです。

HTML では、リンク元の aタグ に href=”#○○” を指定し、移動先の要素に id=”○○” を設定します。

実際の書き方を3つのステップで見ていきます。

ステップ1：クリックする場所に「href=”#○○”」を書く

まずは、ユーザーがクリックするリンク（出発点）を作ります。
aタグ を使いますが、ポイントは href の中身です。

<a href="#profile">プロフィールを見る</a>

このように、href の中に #（シャープ）と移動先の名前（profile）を指定します。

移動先の名前の前に # を付けることで、「同じページ内にある、指定した場所へ移動する」というリンクになります。

ここで指定している profile が、後ほど設定する移動先の id と対応します。

ステップ2：移動先の場所に「id=”○○”」を書く

次に、リンクをクリックしたあとに移動する場所（到着点）を指定します。

移動先となる見出しや段落などの HTML 要素に、id 属性を設定します。

<h2 id="profile">プロフィール</h2>

これで、「プロフィール」という見出しに profile という名前を付けることができます。

ここで注意したいのが、id には # を付けないことです。

リンク元では href=”#profile”、移動先では id=”profile” と書きます。

ステップ3：「hrefの#以降」と「id」を一致させる

同一ページ内リンクを正しく動作させるために重要なのが、リンク元のhrefにある#以降の文字と、移動先のidを同じにすることです。

例えば、次のように書きます。

リンク元：<a href="#contact">お問い合わせ</a>

リンク先：<h2 id="contact">お問い合わせ</h2>

href=”#contact” の # 以降と、id=”contact” が一致しているため、リンクをクリックすると「お問い合わせ」の位置へ移動します。

一方、次のように名前が異なる場合は、正しく移動できません。

リンク元：<a href="#contact-us">お問い合わせ</a>

リンク先：<h2 id="contact">お問い合わせ</h2>

この場合、リンク元では contact-us を指定していますが、移動先の id は contact になっています。

href=”#○○” と id=”○○” の「○○」を同じにすると覚えてください。

idの名前はどう付ければいい？

id の○○の部分は、自分で分かりやすい名前を付けることができます。

例えば、次のような名前にします。

移動先の内容	id
プロフィール	profile
料金	price
お問い合わせ	contact
会社概要	company

HTML の仕様上、id の値は半角英数字に限定されていません。
日本語や全角文字を含む Unicode 文字も使用できます。
また、数字やアンダースコア（_）から始めることもできます。

一方、id の値には空白文字を含めることはできません。

全角文字や日本語は使える？

HTML の id には、日本語や英語などの Unicode文字 を使用できます。
Unicode は、日本語の「プロフィール」や英語の「profile」のように、さまざまな言語の文字を共通のルールで扱うための文字の規格です。

そのため、HTML では次のどちらも id として使用できます。

<h2 id="profile">プロフィール</h2>

<h2 id="プロフィール">プロフィール</h2>

CSSでも日本語のidを指定できる

CSS では、HTML の要素を指定して、文字色や大きさなどの見た目を変更します。

例えば、次の HTML があるとします。

<h2 id="プロフィール">プロフィール</h2>

この h2 の文字色を CSS で変更する場合、id を使って次のように指定できます。

#プロフィール {
  color: red;
}

つまり、CSS では日本語の id だから特別な方法が必要になるわけではなく、英語の id と同じように指定できます。

ただし、数字から始まる id など、CSS のセレクターとしてそのまま記述できない名前もあります。
この点については、後ほど「数字や_から始めてもいい？」で説明します。

JavaScriptでも日本語のidを指定できる

JavaScript では、HTML の中から特定の要素を探して、内容を変更したり、クリックされたときの処理を設定したりできます。
そのために使われるものの一つが getElementById() です。

getElementById() は、「HTML の中から、指定した id を持つ要素を探して取得する」ためのものです。

<h2 id="プロフィール">プロフィール</h2>

というHTMLがあれば、

document.getElementById("プロフィール");

と書くことで、id=”プロフィール”を持つ h2 要素を取得できます。

このように、JavaScript でも日本語の id を指定できます。

したがって、id に日本語や全角文字を使用すること自体が、HTML・CSS・JavaScript で禁止されているわけではありません。

数字やアンダースコア（_）から始めてもいい？

HTMLの仕様上、idは数字やアンダースコア（_）から始めることもできます。

<h2 id="123">料金</h2>
<h2 id="_profile">プロフィール</h2>

ただし、数字から始まる id は、CSS で指定するときに注意が必要です。

例えば、次のような id も使用できます。

<h2 id="123">料金</h2>

<h2 id="_profile">プロフィール</h2>

<h2 id="_123">料金プラン</h2>

ただし、数字から始まる id は、CSS で指定するときに注意が必要です。

例えば、id=”123″ を設定した要素を CSS で指定する場合、次のようには書けません。

#123 {
  color: red;
}

数字から始まるidをCSSで指定するには、数字の「1」を特殊な形式で記述します。

#\31 23 {
  color: red;
}

ここで、\31 は CSS で文字「1」を表す記述です。
\31 の後ろには半角スペースが必要です。
この半角スペースによって、\31 という特殊な記述がどこまでなのかを CSS に伝えています。

#\31 23
   ↑
 半角スペース

一方、アンダースコア（_）から始まる id は、_の後ろが数字であっても、CSS でそのまま指定できます。

例えば、

<h2 id="_123">料金プラン</h2>

の場合は、

#_123 {
  color: blue;
}

と記述できます。

つまり、_profile だけでなく、_123 のような id も CSS でそのまま指定できます。

空白は使えない

id の値には、ASCII 空白文字を含めることはできません。

例えば、次の書き方はNGです。

<h2 id="company profile">会社概要</h2>

company と profile の間に半角スペースが入っているためです。

複数の単語を使う場合は、空白を入れずにハイフン（-）などで区切ります。

<h2 id="company-profile">会社概要</h2>

同じページ内で同じidを使わない

id は、その要素を一意に識別するための名前です。
そのため、同じページ内で同じ id を複数の要素に設定してはいけません。

例えば、次のような記述はNGです。

<h2 id="price">料金</h2>

<h2 id="price">料金プラン</h2>

それぞれ異なる id を設定します。

<h2 id="price">料金</h2>

<h2 id="plan">料金プラン</h2>

移動先に見出しなどがない場合は？

同一ページ内リンクの移動先は、h2 や h3 などの見出しである必要はありません。

例えば、ページ内の特定の文章やコンテンツの位置へ移動させたいものの、そこに見出しなどの適切な HTML要素 がない場合があります。

そのような場合は、span などの要素に id を設定して、移動先を指定することもできます。

<a href="#example">詳しくはこちら</a>

<hp>ここから説明が始まります。</p>

<span id="example">詳しい説明</span>

<hp>詳しい説明はこちらです。</p>

この場合、id=”example” を設定した span の位置が移動先になります。

ただし、移動先にすでに h2 や h3、pなどの適切な HTML要素 がある場合は、span を追加する必要はありません。

その要素に直接 id を設定します。

<h2 id="price">料金</h2>

【実践】よく使う内部リンク2つのパターン

ここまで紹介した「href=”#○○”」と「id=”○○”」を使うと、実際のホームページではさまざまなページ内リンクを作ることができます。

ここでは、特によく使われる次の2つのパターンを紹介します。
・パターンA：ページ上部の目次から、下のコンテンツへ移動する
・パターンB：ページ下部から、ページの一番上へ戻る

パターンA：ページの上（目次など）から、下のコンテンツへジャンプ

長いページでは、ページ上部に目次を設置し、それぞれの項目をクリックすると該当する見出しまで移動するようにすると便利です。

目次のリンクと移動先を設定する

まずは、同一ページ内リンクの基本である aタグ の href と、移動先の id を設定します。

<a href="#price">料金について</a>
<a href="#service">サービス内容</a>
<a href="#contact">お問い合わせ</a>

<h5 id="price">料金について</h5>
<p>料金についての説明です。</p>

<h5 id="service">サービス内容</h5>
<p>サービス内容について説明します。</p>

<h5 id="contact">お問い合わせ</h5>
<p>お問い合わせ方法について説明します。</p>

例えば、href=”#price” のリンクをクリックすると、id=”price” を設定した「料金について」の見出しまで移動します。

同じように、href=”#service” と id=”service”、href=”#contact” と id=”contact” がそれぞれ対応しています。

ホームページでの表示
下記の「料金について」「サービス内容」「お問い合わせ」の各項目をクリックすると、対応する見出しまでジャンプします。

このように、リンク元の href=”#○○” と移動先の id=”○○” を一致させることで、ページ上部から目的のコンテンツへ移動できます。

ul と li を使って目次を一覧にする

実際のホームページでは、ページ内の複数のリンクを目次としてまとめることがあります。
その場合は、ul と li を使ってリンクを一覧として整理できます。

<ul>
  <li><a href="#price">料金について</a></li>
  <li><a href="#service">サービス内容</a></li>
  <li><a href="#contact">お問い合わせ</a></li>
</ul>

<h5 id="price">料金について</h5>
<p>料金についての説明です。</p>

<h5 id="service">サービス内容</h5>
<p>サービス内容について説明します。</p>

<h5 id="contact">お問い合わせ</h5>
<p>お問い合わせ方法について説明します。</p>

ul は順序を持たないリスト、li はリストの各項目を表す HTML要素 です。

この例では、それぞれのリンクを li の中に入れることで、目次の項目を一覧として構造化しています。
ホームページでの表示

目次のようなナビゲーションには nav も使える

さらに、これらのリンクがページ内の主要なナビゲーションとして機能する場合は、nav を使ってまとめることもできます。

<nav>
  <ul>
    <li><a href="#price">料金について</a></li>
    <li><a href="#service">サービス内容</a></li>
    <li><a href="#contact">お問い合わせ</a></li>
  </ul>
</nav>

<h5 id="price">料金について</h5>
<p>料金についての説明です。</p>

<h5 id="service">サービス内容</h5>
<p>サービス内容について説明します。</p>

<h5 id="contact">お問い合わせ</h5>
<p>お問い合わせ方法について説明します。</p>

nav は、主要なナビゲーションのリンクをまとめるためのHTML要素です。
サイト上部にあるグローバルナビゲーションだけでなく、記事内の目次のように、ページ内の主要なコンテンツへ移動するリンクをまとめる場合にも使用できます。

ただし、同一ページ内リンクを作るために nav が必須というわけではありません。
aタグ の href と移動先の id が正しく設定されていれば、nav を使わなくてもリンクは機能します。
ホームページでの表示

パターンB：ページの下から「ページの1番上（トップ）」へ戻る

同一ページ内リンクは、ページの上部から下部へ移動するだけでなく、ページの下から一番上へ戻るときにも使えます。
長いページでは、最後まで読み進めたあとにページ上部へ戻りたいことがあります。

このような場合は、ページ下部に「ページトップへ戻る」リンクを設置すると便利です。
ページの一番上へ戻る方法には、主に次の2つがあります。
・id=”top” を設定して、href=”#top” で戻る方法
・href=”#” を使って戻る方法

id=”top” と href=”#top” を使う方法

これまで説明した同一ページ内リンクと同じ仕組みを使って、ページ上部を移動先として指定できます。

例えば、body に id=”top” を設定します。

<body id="top">

  <h1>ホームページのタイトル</h1>

  <p>ページの内容です。</p>

  <!-- ページの途中にさまざまなコンテンツ -->

  <h2>お問い合わせ</h2>
  <p>お問い合わせについての説明です。</p>

  <a href="#top">ページトップへ戻る</a>

</body>

ページ下部の

<a href="#top">ページトップへ戻る</a>

をクリックすると、id=”top” を設定した body の位置へ移動します。

この方法は、これまで紹介してきた仕組みと同じです。
「ページトップ」という名前を top として付け、その名前を href=”#top” から指定しています。

href=”#” を使ってページの先頭へ戻る方法

ページの一番上へ戻るだけであれば、href=”#” と記述する方法もあります。

<a href="#">ページトップへ戻る</a>

このように記述すると、リンクをクリックしたときにページの先頭へ移動します。
この方法では、移動先の要素に id を設定する必要はありません。

href=”#” はページの先頭へ戻るだけなので、ページトップへ戻るリンクを簡単に作りたい場合に使えます。

一方、href=”#top” のように id を指定する方法では、top という名前を付けた特定の場所へ移動します。
そのため、ページトップ以外の場所を移動先にしたい場合にも、同じ考え方を使えます。

同一ページ内リンクを使うときの注意点

同一ページ内リンクは、href と id を正しく設定するだけで簡単に作れます。

ただし、設定方法を間違えると、クリックしても目的の場所へ移動できなかったり、意図した場所へ移動できなかったりすることがあります。

ここでは、同一ページ内リンクを使うときに注意したいポイントを紹介します。

href には # を付け、id には付けない

同一ページ内の特定の場所へ移動する場合は、リンク元の href に # を付けます。

<a href="#contact">お問い合わせ</a>

一方、移動先の id には # を付けません。

<h2 id="contact">お問い合わせ</h2>

つまり、
・リンク元：href=”#contact”
・移動先：id=”contact”
と記述します。

href に # を付け忘れたり、id に # を付けたりしないように注意してください。

href と id の値を一致させる

リンク元の href に指定した # を除いた値（名前）と、移動先の id の値は一致させる必要があります。

<a href="#contact">お問い合わせ</a>

<h2 id="contact">お問い合わせ</h2>

この場合は、href=”#contact” の contact と id=”contact” が一致しているため、正しく移動できます。

一方、

<a href="#contact-us">お問い合わせ</a>

<h2 id="contact">お問い合わせ</h2>

のように値（名前）が異なると、意図した場所へ移動できません。

移動先のコンテンツに関連した id 名を付ける

id は、移動先がどのようなコンテンツなのか分かる名前にしておくと管理しやすくなります。

例えば、

<h2 id="price">料金</h2>

<h2 id="service">サービス内容</h2>

<h2 id="contact">お問い合わせ</h2>

のように、コンテンツの内容に関連した名前を付けます。
このようにしておくと、HTMLコード　を見たときにも、それぞれの id がどの場所を示しているのか分かりやすくなります。

同じ id を重複させない

id は、同じページ内で同じ名前を複数の要素に設定しないようにします。

例えば、

<h2 id="price">料金</h2>

<h2 id="price">料金プラン</h2>

のように同じ id を設定するのは避けてください。

長いページでは、要所にページ内リンクを設置する

文章量の多いページでは、ページ上部に目次を設置するだけでなく、ページの途中にもページ内リンクを設置すると、ユーザーが目的の場所へ移動しやすくなります。
特にスマートフォンでは、画面が小さいため、長いページを何度もスクロールして目的の場所を探す必要があります。

例えば、コンテンツの途中に関連する項目へのリンクを設置したり、各セクションの最後に次の項目へ移動するリンクを設置したりすると、ページ内を移動しやすくなります。

また、ページ下部には「ページトップへ戻る」リンクを設置しておくと、ページ上部へ戻るときにも便利です。

このように、ページ内リンクは「ページ上部の目次」や「ページトップへ戻るリンク」だけでなく、ユーザーがページ内を移動しやすくするための導線として、必要な場所に設置することが大切です。