ページ内リンク

WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。

その中でも特に勉強になったコードを紹介します。

コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。

あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！

ページ内リンク

ページ内リンク（アンカーリンク）は、同じページの目的の場所へスクロールで案内する仕組みです。目次から見出しへ、CTAから料金表へ――縦に長いページが当たり前になった今、読者を迷子にしないための基本部品と言えます。

このデモの肝は「追従ヘッダー分の高さを引いて止める」処理です。固定ヘッダーのあるサイトでは、素朴なアンカーリンクだと見出しがヘッダーの下に隠れてしまう――誰もが一度はハマる、定番のつまずきどころを正面から扱っています。

おさえておきたいところ

「ページ内リンク」を使う目的はこんな感じです。

             目的：ページ内の目的の場所にスクロールさせる
動きのきっかけ：クリック / スクロール

追従するHeader分の高さを引いて適切な場所へスクロール

ページ内の指定の場所にスクロール

実務メモ（2026年追記）

当時はJavaScriptでヘッダー高を差し引いていましたが、いまはCSSだけで解決できます。scroll-margin-topを見出しに指定すればズレは解消し、scroll-behavior: smoothでスムーススクロールも標準機能になりました。「JSでの制御」はイージングを細かく調整したい場合の選択肢として残る、という位置づけです。

• まずscroll-margin-top＋scroll-behaviorのCSS解で足りるかを検討する
• prefers-reduced-motionではスムーススクロールを無効化する配慮を
• アンカー先のIDは日本語でも動くが、英数字にしておくと共有URLが崩れにくい
• ページ先頭へ戻る側の設計はページトップリンクで扱っています

次回の予定

ページのスクロールを促す「スクロールダウン」を作ってみようと思います＼＼٩( ‘ω’ )و //／／