いつからか Webブラウザで開いたページの特定部分にリンクを張ることができるようになりました。

従来は、ページへのリンクURLをクリックすると、リンク先のページの先頭に移動する動作になりますが、この方法を使うとその特定部分が表示されるというわけです。

HTML言語でホームページを作成したことのある方は、ページ内に IDタグを設置して、そこへのリンクを張ることだな、と気付かれると思いますが、自分が所有するページではなく任意ページの特定場所へのリンクを張ることができるということです。

この機能は「Scroll To Text Fragment」または単に「Text Fragments」と呼ばれるもので、Google Chrome、Microsoft Edgeなどで利用でき、他のブラウザでも順次対応されると思います。

Google Chromeで表示した拙文「リンクの張り方」の URL は次のようになっています。
https://ameblo.jp/unicom-k/entry-12577843083.html
つまり、ここにアクセスすれば、「リンクの張り方」記事の先頭が表示されます。(下図)

 

このページを下にスクロールして、途中のテキストを選択し、マウス右クリックするとメニューの中に「選択箇所へのリンクをコピー」という項目があります。(下図)

 

これを選択し、メモ帳などテキストエディタや Word文書中に貼り付けてみると、次のように表示されます:
https://ameblo.jp/unicom-k/entry-12577843083.html#:~:text=%E4%BB%8A%E5%BA%A6%E3%81%AF%E3%80%8C%E5%A4%96%E9%83%A8%E3%83%AA%E3%83%B3%E3%82%AF%E3%80%8D%E3%82%92%E8%A9%A6%E3%81%97%E3%81%A6%E3%81%BF%E3%81%BE%E3%81%97%E3%82%87%E3%81%86%E3%80%82

このリンクにアクセスしてみると、ブラウザに新たなタブが追加され、ページの先頭ではなく先ほど選択した箇所が色付けされて表示されます。(下図)

 

上記リンクの後半には「%」付きの表記になっていて読みづらいですが、これは日本語で書かれたURLを半角英数字に置き換える「URLエンコード」で変換しているものです。
上記URLの「text=」に続く部分をデコードすると「今度は「外部リンク」を試してみましょう。」となります。

こうすると、上記URLを解釈しやすくなります。
先頭から「#」の手前までは、リンク先ページの URLですね。
それに続いて「#:~:text=」が付加されています。
これを付加しているために、そのページの先頭ではなく、「text=」以降のテキストがある場所に移動するわけです。

1つ疑問が出てきます。
リンク先のページ内に指定したテキストが複数ヶ所に出てくる場合はどうでしょう。
やってみると、指定したテキストの場所へのリンクとなっています。
つまり、単に指定テキストを見つけて表示するのではなく、その場所も記憶されているということですね。

今度は Microsoft Edgeで試してみます。
同じページの同じテキストを選択し、マウス右クリックするとメニューの中に「強調表示するリンクのコピー」という項目があります。(下図)

 

これをクリックし、テキストエディタなどに貼り付けてみると、上記の URL と同じものが表示されます。
これを Edgeで表示すると、黄色く色付けされてその場所が表示されます。(下図)

 

これらの「テキストフラグメント」機能を使うと、長いページであっても目的の場所を直接開くことができ、便利です。

なお、このようにコピーされたリンクURLは、ブラウザのブックマークに登録することももちろんできます。