フラグメントとは？URLの「#」以降の意味・仕組み・使い方を初心者向けにわかりやすく解説

上記のようなことをお考えでしたら、このまま読んでいってください。
この記事では、「フラグメント」に関する下記の内容をわかりやすく解説いたします。

※わかりやすさを重視しております。厳密には解釈が異なる場合がありますことをご了承ください。

スポンサードリンク

フラグメントとは？

フラグメントとは、URLの「#（シャープ）」以降に書かれる文字列を指します。
主な目的は、Webページ内の特定の場所へ移動することです。

ブラウザがフラグメントを読み取り、対応する位置までスクロールします。
フラグメント自体はサーバーへ送信されず、ブラウザ側で処理されます。

例えば次のURLを見てみましょう。

https://example.com/sample.html#about

この場合

https://example.com/sample.html

がページのURLで、

#about

がフラグメントです。
つまり「about」という場所まで移動するようブラウザへ指示しています。

フラグメントは、本の目次によく似ています。

例えば100ページある本で、「第3章を読みたい」と思ったら目次を見て、そのページへ移動します。
Webページでも同じで、「#section3」なら「第3章」まで一気にスクロールします。

つまりページ内の目印だと考えると理解しやすいでしょう。

主な用途は次のとおりです。

スポンサードリンク

フラグメントは以下の流れで動作します。

URLへアクセス
      ↓
ページを読み込む
      ↓
ブラウザが#以降を確認
      ↓
該当する場所までスクロール

しかしながら、ページのどの部分にでも自由に移動できるわけではありません。
ページの見出しや段落に「id」が付与されている必要があります。

例えば「第2章」という見出しに「section2」というidが付与されていれば、フラグメントである「#section2」を指定することで、「第2章」へ移動できるというわけです。

また、フラグメントはサーバーへ送信されないという性質があります。
例えば、

https://example.com/page#section2

へアクセスすると、サーバーが受け取るのは

https://example.com/page

までです。
その後、ブラウザが

#section2

を処理して目的の場所へ移動します。

スポンサードリンク

基本形はこちらです。

https://example.com/page#section1

HTMLでは以下のように「id」属性を含めることで「#section1」へ移動できます。

<h2 id="section1">フラグメントとは</h2>

スポンサードリンク

初心者が混同しやすいのがクエリパラメータです。

比較項目	フラグメント	クエリパラメータ
記号	#	?
役割	ページ内移動	データを送る
サーバーへ送信	されない	される
用途	目次・アンカー	検索・ログイン・商品検索
例	https://example.com/page#faq	https://example.com/search?q=python