フラグメント(#)とは？ページ内リンクが飛ぶ仕組み

フラグメントとは何か

フラグメントとは、URLの末尾にある「#」記号と、それに続く文字列のことを指します。たとえば example.com/guide#section3 というURLでは、#section3 の部分がフラグメントです。

フラグメントはサーバーに送られない、というのが大きな特徴です。ブラウザがページを読み込むときに使うのは#より前の部分だけで、#以降はブラウザ内部での移動先を指定するために使われます。

そのため、フラグメントが指すのは「どのページを開くか」ではなく「開いたページのどこを表示するか」です。同じページ内の特定の位置を示す目印だと考えると分かりやすいでしょう。

なぜページの途中まで飛ぶのか

HTMLの中には、見出しや段落などの要素にid属性という名前を付けられる仕組みがあります。フラグメントは、このidと対応しています。

URLの#のあとに書いた文字列と同じidを持つ要素がページ内にあると、ブラウザはその要素が画面の上端付近に来るように自動でスクロールします。これがページ内ジャンプの正体です。

対応するidが見つからない場合は、ジャンプは起きずにページの先頭がそのまま表示されます。リンクを押しても何も動かないように見えるときは、idの綴り違いが原因のことが多いです。

実務ではどこで関係する？

フラグメントは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

フラグメント(#)について迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

• 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
• 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
• 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
• 運用の話: 期限、差し替え、削除、共有メッセージまで決める

ページ内リンクを作る手順

目次から各セクションへ飛ぶリンクを作るには、飛び先に名前を付け、その名前をリンク先に書く、という2つの作業をセットで行います。

1. 飛び先になる見出しなどの要素に、重複しない名前（id）を付ける
2. 目次側のリンクの行き先を、#に続けてその名前と同じ文字列にする
3. 名前は半角英数字を基本にし、大文字と小文字の違いも一致させる
4. 実際にリンクを押して、意図した位置までスクロールするか確かめる
5. 見出しが多いページでは、主要な見出しすべてに名前を付けておく

URL共有とフラグメントの相性

フラグメント付きのURLをそのまま誰かに送ると、相手はページを開いた瞬間に指定の位置まで移動した状態で見られます。長いマニュアルやFAQで「この項目を見てほしい」と伝えたいときに便利です。

ただしフラグメントはブラウザの履歴に残るものの、サーバー側のアクセス記録には#以降が現れないことがあります。どの位置が見られたかを正確に把握したい用途には向きません。

使うときの注意点

フラグメントはあくまで表示位置の指定であり、コンテンツの公開範囲を制御する仕組みではありません。#を付けて特定の位置を隠したつもりでも、ページ全体はそのまま閲覧できます。

見せたくない部分がある場合は、フラグメントではなくページそのものへのアクセス制御を考える必要があります。たとえばギガサイト便でHTMLを共有すると、URLだけでなくパスワードやメール認証といった認証方式を選べるため、関係者だけに見せたい確認用ページを扱うときに役立ちます。