閉じる

HTMLでページ内リンク（ジャンプ）を作成する手順：ズレの修正やスムーズスクロールの実装方法を解説

広告

Webサイトのコンテンツ量が増えるにつれて、ユーザーが目的の情報へ素早く辿り着けるようにする工夫が求められています。

ページ内リンク（ジャンプ）は、長い1ページ構成のサイトや記事において、ユーザビリティを向上させるための非常に重要な要素です。

しかし、単にリンクを設定するだけでは、スクロールが唐突に感じられたり、固定ヘッダーによって遷移先が隠れてしまったりする問題が発生します。

本記事では、HTMLとCSSを用いた基本的なページ内リンクの実装方法から、2026年現在の標準となっているスムーズスクロール、さらにヘッダーによるズレを修正するテクニックまで詳しく説明します。

目次 [ close ]
  1. HTMLによるページ内リンクの基本構造
    1. ジャンプ先（ターゲット）にid属性を指定する
    2. リンク元（出発点）のhref属性を記述する
  2. スムーズスクロールの実装方法
    1. CSSだけで実現するスムーズスクロール
    2. アクセシビリティへの配慮（prefers-reduced-motion）
  3. 固定ヘッダーによる表示位置のズレを修正する
    1. scroll-margin-topプロパティの活用
    2. 複数の要素に一括適用する場合
  4. 別ページから特定のセクションへ直接リンクする
  5. ページ内リンクが正しく動作しない原因と対策
    1. id属性の重複と記述ミス
    2. JavaScriptによる干渉
    3. 遅延読み込みによる位置のズレ
  6. JavaScriptを併用した高度なスクロール制御
    1. window.scrollToメソッドの使用
  7. まとめ

HTMLによるページ内リンクの基本構造

ページ内リンクを実装するには、リンクの出発点となる要素と、移動先となるターゲット要素の2つを正しく設定する必要があります。

まずは最も基礎となる、アンカータグ（aタグ）とid属性を組み合わせた記述方法について見ていきましょう。

ジャンプ先（ターゲット）にid属性を指定する

移動先の要素には、一意の識別子としてid属性を付与する必要があります。

id属性は一つのHTML文書内で重複して使用することができないため、各セクションに対して固有の名前を付けてください。

例えば、記事の後半にある「お問い合わせ」セクションへ飛ばしたい場合は、その見出し要素などにid="contact"のように記述します。

リンク元（出発点）のhref属性を記述する

リンクをクリックする側のaタグには、href属性の中に「#（ハッシュ）」を付けたid名を指定します。

この「#」はページ内の特定の場所を指し示す記号であり、これに続く文字列が移動先のidと一致することでリンクが機能します。

具体的なコード例は以下の通りです。

HTML
<!-- リンク元（メニューなど） -->
<a href="#section1">セクション1へ移動</a>

<!-- リンク先（コンテンツ部分） -->
<h2 id="section1">セクション1のタイトル</h2>
<p>ここがジャンプ先のコンテンツです。</p>
実行結果
（ブラウザ上の動作）
「セクション1へ移動」をクリックすると、画面が「セクション1のタイトル」の位置まで瞬時に移動します。

スムーズスクロールの実装方法

デフォルトの設定では、リンクをクリックした瞬間にターゲット位置へ画面が「ワープ」するように切り替わります。

しかし、現代のWebデザインにおいては、ユーザーがサイト内のどこへ移動したかを直感的に理解できるようにスムーズなアニメーションを伴うスクロールが推奨されます。

CSSだけで実現するスムーズスクロール

以前はJavaScriptを使用して複雑なコードを書く必要がありましたが、現在はCSSの1行だけでスムーズスクロールを実現できます。

html要素に対して、scroll-behavior: smooth;を適用するだけで、ページ内のすべてのリンクが滑らかに動くようになります。

CSS
/* CSSファイルに記述 */
html {
  scroll-behavior: smooth;
}

この設定を行うだけで、特別なスクリプトを読み込むことなく、心地よいユーザー体験を提供することが可能になります。

ただし、ユーザー自身のOS設定で「視覚効果を減らす」が有効になっている場合を考慮し、アクセシビリティに配慮した設計が望ましいとされています。

アクセシビリティへの配慮（prefers-reduced-motion）

アニメーションによって不快感や目眩を感じるユーザーのために、CSSでアニメーションを無効化する設定も併せて覚えておきましょう。

CSS
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

このように記述することで、ユーザーのデバイス設定を尊重したWebサイト制作が可能になります。

固定ヘッダーによる表示位置のズレを修正する

ページ内リンクを実装する際、多くの開発者が直面するのが「固定ヘッダーでターゲットの見出しが隠れてしまう」という問題です。

ページ上部に常に表示されるヘッダーがある場合、ブラウザはターゲット要素を画面の最上部に合わせようとするため、ヘッダーの高さ分だけコンテンツが重なってしまいます。

scroll-margin-topプロパティの活用

この問題を解決するための最もモダンでシンプルな手法は、CSSのscroll-margin-topプロパティを使用することです。

このプロパティをターゲットとなる要素に設定すると、スクロールが停止する位置に「余白」を持たせることができます。

例えば、ヘッダーの高さが80pxであれば、見出し要素に80px以上の数値を設定します。

CSS
/* 全ての見出しに対して、スクロール時の上部余白を設定 */
h2, h3 {
  scroll-margin-top: 100px;
}

この方法の利点は、実際のレイアウト（marginやpadding）に影響を与えることなく、スクロール時の停止位置だけを調整できる点にあります。

以前行われていた「見出しに負のmarginと正のpaddingを組み合わせる」といったトリッキーな手法は、現在は必要ありません。

複数の要素に一括適用する場合

もし特定のクラスを持つ要素すべてに対してズレを防止したい場合は、汎用的なクラスを作成しておくと便利です。

CSS
.anchor-target {
  scroll-margin-top: 4rem; /* ヘッダーの高さに合わせて調整 */
}

これにより、HTML側でclass="anchor-target"を付与するだけで、常に適切な位置でジャンプが止まるようになります。

別ページから特定のセクションへ直接リンクする

ページ内リンクは、同一ページ内だけでなく、外部のページから特定のセクションを指定して遷移させることも可能です。

この場合、URLの末尾に「#id名」を付け加えることで、ページが読み込まれた直後にその位置までスクロールさせることができます。

リンクの種類URLの記述例
同一ページ内href="#contact"
別ページの特定箇所href="services.html#design"
別ドメインの特定箇所href="https://example.com/about#team"

この機能を活用することで、FAQページから特定の質問へ直接案内したり、詳細ページから補足情報へ誘導したりといったスムーズな導線設計が可能になります。

ページ内リンクが正しく動作しない原因と対策

設定したはずのページ内リンクが期待通りに動かない場合、いくつかの共通した原因が考えられます。

トラブルシューティングとして、以下の項目を確認してみてください。

id属性の重複と記述ミス

最も多いミスは、id名のスペルミスや、同じidを複数の要素に使ってしまうことです。

idは1ページに1つだけという原則を守らないと、ブラウザはどの要素にスクロールすべきか判断できず、動作が不安定になります。

また、id名に日本語（全角文字）を使用することも技術的には可能ですが、URLエンコードの問題が発生しやすいため、英数字とハイフン、アンダースコアのみで構成することを強く推奨します。

JavaScriptによる干渉

サイト内で使用している他のスクリプトが、クリックイベントをキャンセルしている場合があります。

特に、ページ全体の遷移を制御するようなSPA（Single Page Application）フレームワークを使用している場合、標準のアンカーリンクが無視されるケースがあります。

その場合は、フレームワークが提供する独自のルーティング機能やスクロール用ライブラリを使用する必要があります。

遅延読み込みによる位置のズレ

画像などの要素が遅れて読み込まれる（Lazy Load）場合、ページ全体の高さが後から変わるため、スクロール位置がずれてしまうことがあります。

これを防ぐには、画像タグに必ずwidthとheight属性を指定し、あらかじめ表示領域を確保しておくことが重要です。

JavaScriptを併用した高度なスクロール制御

CSSだけでは実現できない、より複雑な制御が必要な場合はJavaScript（Web API）を活用します。

例えば、「特定のボタンを押したときにだけ特定の速度でスクロールさせたい」といった要望に応えることができます。

window.scrollToメソッドの使用

window.scrollToを使用すると、座標や振る舞いを細かく指定してスクロールを実行できます。

JavaScript
// ボタンクリックで特定位置へスクロール
const button = document.querySelector('#scroll-btn');
const target = document.querySelector('#target-section');

button.addEventListener('click', () => {
  const rect = target.getBoundingClientRect().top;
  const offset = window.pageYOffset;
  const gap = 80; // ヘッダー分の隙間
  const targetPosition = rect + offset - gap;

  window.scrollTo({
    top: targetPosition,
    behavior: 'smooth'
  });
});

この方法であれば、動的に変化するヘッダーの高さなどを取得して、常に正確な位置へジャンプさせることが可能です。

まとめ

HTMLのページ内リンクは、ユーザーを迷わせることなく目的の情報へと導く、Webサイト設計の基本要素です。

単純なリンク機能に加えて、CSSのscroll-behavior: smooth;による滑らかな移動や、scroll-margin-topによる視認性の確保を組み合わせることで、サイトの品質は飛躍的に向上します。

特に、固定ヘッダーを採用している現代のWebサイトにおいては、ジャンプ位置の補正は必須のテクニックと言えるでしょう。

今回解説した手順をもとに、自身のサイトでもストレスのない快適なページ内遷移を実現させてください。

正しいマークアップと最新のCSSプロパティを駆使することで、アクセシビリティと利便性を両立した素晴らしいコンテンツを提供できるはずです。

URLをコピーしました！