目次
1. URLにおける通常のフラグメント
一般に「URL」は Webページの住所を表しますが、末尾にフラグメント (fragment, #
に続けて指定する文字列) を追加することにより、Webページ上の特定の位置を含めた表現が可能です。
例えば、アクセスしたいWebページのHTML内に、以下のタグが記述されているとします。
<a href="foo">Bar</a>
この場合、ブラウザのアドレスバーに「末尾に #foo
を追加したURL」を指定してアクセスすると、ブラウザは上記のタグの位置がちょうど画面の上端にくる位置まで自動でスクロールしてくれます。
フラグメントの詳細については、URL Standard を参照してください。
2. Text Fragments(テキスト フラグメント)
Text Fragments とは?
一方、フラグメントに関する新しい仕様である Text Fragments を利用すると、Webページ上の「特定の文字列」を URL で表現することができるようになります。
テキストフラグメントを含むURLを指定してWebページにアクセスすると、ブラウザはその文字列をハイライト表示し、その位置までスクロールしてくれます。誰かに「このWebページのこの部分を伝えたい」という場合に大変便利です。
Text Fragments の使い方
テキストフラグメントのフォーマットは以下になります。
#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
context |-------match-----| context
match
で指定されている範囲が「指定したい文字列」になります(textStart
とtextEnd
を使います)。- この範囲を明確にするために、
context
を指定することもできます(prefix-
と-suffix
を使います)。
4つの項目を指定することができます。それぞれの意味は以下の表の通りです。
prefix- |
|
---|---|
textStart |
|
textEnd |
|
-suffix |
|
この4つの項目の文字列は、それぞれパーセントエンコーディングしてから指定します(ブラウザが自動的に変換してくれます)。
デモ
以下の文章を使って、実際にいくつかのフラグメントを試してみます(ブラウザは Chrome か Edge を使ってください)。
私はコーヒーと紅茶が好きです。
彼はコーヒーも紅茶も嫌いです。
以下の「フラグメント(とリンク)」列にリンクが貼ってあるのでクリックしてください。
No. | フラグメント(とリンク) | 説明 |
---|---|---|
1 | #:~:text=コーヒー |
|
2 | #:~:text=コーヒー,紅茶 |
|
3 | #:~:text=彼は-,コーヒー |
|
4 | #:~:text=紅茶,-も |
|
5 | #:~:text=彼は-,コーヒー,紅茶,-も |
|
6 | #:~:text=私は-,コーヒー&text=彼は-,コーヒー,紅茶 |
|
※ Text Fragments によるハイライト表示は、ページを最初に開いたときしか適用されないため、上記のリンクは新規タブで開くようにしています。
3. URLを生成するための拡張機能
テキストフラグメントを含むURLを手動で作成するのは面倒です。そのため、ブラウザの画面上から簡単にURLを生成するためのブラウザ拡張機能が用意されています。詳細は以下のページを参照してください。
Chrome 90 以降では標準機能になりました
Chrome のバージョン 90(2021年4月リリース)で、選択した文字列を指すリンクを作成する機能が標準搭載されました。
リンクにしたい文字列を選択状態にして、右クリックし [選択箇所へのリンクをコピー] を選びます。
Android 用 Chrome 97 でのリンク作成方法
まず、目的の文字列を長押しして選択状態にします。
するとコンテキストメニューが表示されるので、そこにある [共有] をタップします。
[選択箇所へのリンクを含める] を有効にして、リンクを貼り付けるアプリを選択します。
参考
PCではChrome 90 以降では標準機能になりました。で簡単に指定したURLを作成できると思うのですがスマホではdのようにすればいいかご存知でしょうか?
Android版 Chrome 97 での方法を本文の最後に追記しました!