【HTML】ページ内リンクの作成・活用法7選！初心者でも簡単カスタマイズ

はじめに
●ページ内リンクの基本
- ○基本的なリンクの作成方法
  - □対象の要素にID属性を付与する
  - □aタグのhref属性に「#id」と記述する
●ページ内リンクの使い方
●ページ内リンクのカスタマイズ方法
●応用例とサンプルコード
- ○ページ内リンクを利用したアコーディオンメニュー
- ○サイドバーで常に表示されるページ内リンク
まとめ

はじめに

この記事を読めば、ページ内リンクの作成やカスタマイズが簡単にできるようになります。

初心者でもわかりやすい方法で、ページ内リンクの使い方、対処法、注意点、カスタマイズ方法を解説していきます。

●ページ内リンクの基本

ページ内リンクとは、同一ページ内の特定の場所へスクロールさせるリンクのことです。

これを利用することで、ユーザーが簡単に目的の場所へ移動できるようになります。

○基本的なリンクの作成方法

ページ内リンクを作成するには、次の手順を踏みます。

□対象の要素にID属性を付与する

このIDはリンク先のアンカーとして機能します。

<!-- 対象の要素にid属性を付与 -->
<h2 id="section1">セクション1</h2>

□aタグのhref属性に「#id」と記述する

このリンクがクリックされると、ブラウザはIDが指定された要素の位置まで自動でスクロールします。

<!-- リンクを作成 -->
<a href="#section1">セクション1へジャンプ</a>

●ページ内リンクの使い方

ページ内リンクはウェブページのナビゲーションを強化し、ユーザビリティを向上させるために様々な方法で活用できます。

ここでは、目次の作成、トップへ戻るリンク、タブ切り替え、FAQセクションなどの具体的な使用例とそれぞれのサンプルコードを紹介します。

○目次の作成

目次はページの全体構造を理解しやすくし、ユーザーが求める情報に素早くアクセスできるようにする役割を果たします。

<!-- 目次 -->
<ul>
  <li><a href="#section1">セクション1</a></li>
  <li><a href="#section2">セクション2</a></li>
</ul>

<!-- セクション -->
<h2 id="section1">セクション1</h2>
<p>ここはセクション1の内容です。</p>

<h2 id="section2">セクション2</h2>
<p>ここはセクション2の内容です。</p>

ここでは、各セクションへのリンクが含まれた目次を作成しています。

○トップへ戻るリンク

長いページでは、トップへ戻るリンクが特に有用です。

<!-- ページの先頭にid属性を設定 -->
<body id="top">

<!-- トップへ戻るリンク -->
<a href="#top">トップへ戻る</a>

このコードにより、ページのどこからでもトップへ素早く戻ることができます。

○タブ切り替え

タブ切り替えは、異なるコンテンツをスペース効率良く表示するために役立ちます。

<!-- タブメニュー -->
<ul>
  <li><a href="#tab1">タブ1</a></li>
  <li><a href="#tab2">タブ2</a></li>
</ul>

<!-- タブコンテンツ -->
<div id="tab1">タブ1の内容です。</div>
<div id="tab2">タブ2の内容です。</div>

ここでは、異なるタブ間でのコンテンツの切り替えを実現しています。

○よくある質問（FAQ）ページ

FAQページは、ユーザーの疑問に対する回答を効率的に提供するために使用されます。

<!-- 質問リスト -->
<ul>
  <li><a href="#question1">質問1</a></li>
  <li><a href="#question2">質問2</a></li>
</ul>

<!-- 質問と回答 -->
<h3 id="question1">質問1</h3>
<p>ここに回答1を記述。</p>

<h3 id="question2">質問2</h3>
<p>ここに回答2を記述。</p>

このコードにより、ユーザーは各質問へ素早くナビゲートし、回答を読むことができます。

○ページ内アンカー

アンカーリンクは、ページ内の特定の位置へのナビゲーションを簡単にするために使用されます。

<!-- アンカーリンク -->
<a href="#anchor1">アンカー1へジャンプ</a>

<!-- アンカー -->
<p id="anchor1">ここがアンカー1の位置です。</p>

このコードは、ページ内の「アンカー1へジャンプ」というリンクをクリックすると、「ここがアンカー1の位置です。」と記載された部分までページがスクロールします。

これにより、ユーザーは長いページ内で素早く特定のセクションにアクセスできます。

●ページ内リンクのカスタマイズ方法

ページ内リンクのカスタマイズは、ウェブサイトのユーザビリティとデザインを向上させる重要な要素です。

リンクの視覚的スタイル、アクティブ状態の表示、スムーズなスクロール効果の実装などを通じて、より洗練されたユーザー体験を提供する方法を紹介します。

○リンクの装飾を変更する

リンクの基本的な装飾を変更することで、サイトのデザインに合わせた外観を実現できます。

<style>
  a {
    color: blue;
    text-decoration: none;
  }
  a:hover {
    color: red;
    text-decoration: underline;
  }
</style>

このスタイル設定では、リンクの基本色を青にし、マウスオーバー時に赤色に変わり下線が表示されるようにしています。

○アクティブなリンクにスタイルを適用する

ユーザーが現在どのリンクを選択しているかを視覚的に示すために、アクティブなリンクに特別なスタイルを適用します。

<style>
  .active {
    font-weight: bold;
    background-color: yellow;
  }
</style>

このコードでは、アクティブなリンクに黄色の背景と太字のフォントスタイルを適用しています。

○スムーズスクロールの実装

ページ内リンクをクリックしたときのスクロール動作を滑らかにすることで、ユーザー体験を向上させます。

<style>
  html {
    scroll-behavior: smooth;
  }
</style>

scroll-behavior プロパティを smooth に設定することで、ページ内リンクの遷移が滑らかなスクロール動作になります。

●応用例とサンプルコード

ページ内リンクは単にページ内の別セクションへのナビゲーションとして機能するだけでなく、ユーザビリティを高め、デザインの幅を広げる多様な応用が可能です。

ここでは、ページ内リンクを用いたアコーディオンメニューとサイドバーのサンプルコードを詳しく解説し、これらをウェブサイトにどのように実装するかを紹介します。

○ページ内リンクを利用したアコーディオンメニュー

アコーディオンメニューは、コンテンツをコンパクトにまとめ、必要に応じて表示するインタラクティブな方法です。

下記のサンプルコードは、ページ内リンクを使用してアコーディオンメニューを実装する方法を表しています。

<!-- アコーディオンメニュー -->
<details id="accordion1">
  <summary><a href="#accordion1">メニュー1</a></summary>
  <p>ここにメニュー1の内容が入ります。</p>
</details>

<details id="accordion2">
  <summary><a href="#accordion2">メニュー2</a></summary>
  <p>ここにメニュー2の内容が入ります。</p>
</details>

ここでは、<details> と <summary> タグを使用して各セクションの折り畳み可能なコンテンツを作成しています。

リンクをクリックすると、対応するアコーディオンセクションが開き、その内容が表示されます。

○サイドバーで常に表示されるページ内リンク

サイドバーに固定されたリンクは、ユーザーがページをナビゲートする際に常にアクセス可能な目次のような役割を果たします。

下記のコードは、固定サイドバー内のページ内リンクの実装方法を表しています。

<style>
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
  }
</style>

<!-- サイドバー -->
<div id="sidebar">
  <ul>
    <li><a href="#section1">セクション1</a></li>
    <li><a href="#section2">セクション2</a></li>
  </ul>
</div>

position: fixed; スタイルを適用することで、サイドバーはスクロール時にも常に同じ位置に固定され、ページ内の任意のセクションに素早くジャンプすることができます。