#:~:text=を使って、任意のページの文章までスクロールしハイライトするリンクを作りましょう。構文、エンコードのルール、対応ブラウザー、::target-textによるスタイル設定、リンク作成ツールを紹介します。
テキストフラグメントとは、Webアドレスに追加する#:~:text=とページ内の語句のことで、ブラウザーをその語句までスクロールさせてハイライトします。Chromeの「ハイライトへのリンクをコピー」メニューで自動作成でき、任意のstart、end、prefix、suffixを使って手作業で作ることもできます。
テキストフラグメントに対応した最初のブラウザーのバージョン（caniuse、2026年10月時点）
顧客を返品ポリシーのちょうどその行へ案内したり、取引先に長い提案書の1段落を示したりするなら、「少し下にスクロールしてください」と言うよりずっと確実です。テキストフラグメントのリンクなら、URLが少し長くなるだけでそれができ、ページの所有者がアンカーを追加する必要もありません。作成ツールにページのアドレスと文章を貼り付けて作ってみましょう。
ページ上のテキストを選択し、右クリックして「ハイライトへのリンクをコピー」を選びます。Chromeヘルプによると、この項目を選べない場合、そのコンテンツでは機能が動作しない可能性があります。
現行バージョンなら使えます。caniuseによると、Chrome 81とEdge 83に加え、Safari 16.1とFirefox 131から対応しています。古いブラウザーではページが先頭から開くだけです。
語句が書いたとおりに表示されていない、1つの部分が2つの段落にまたがっている、テキスト内のダッシュがパーセントエンコードされていない、といった原因が考えられます。MDNによると、iframe内のテキストは検索対象になりません。
いいえ。MDNによると、ブラウザーは読み込み中にURLから:~:ディレクティブを取り除くため、ページのスクリプトからは読み取れません。対応しているかどうかはdocument.fragmentDirectiveで判定できます。
MDNによると、Chromiumベースのブラウザーは、ページをテキストフラグメントのスクロール対象から外すDocument-Policy: force-load-at-topレスポンスヘッダーに従います。
テキストフラグメントの形式とハイライトされる範囲
ハイライトの色はブラウザーがデフォルトで決めます。::target-text疑似要素を使えば、ブランドに合わせた色にできます。
テキストとハイライトの色の間には十分なコントラストを保ちましょう。
document.fragmentDirectiveは、対応ブラウザーではオブジェクト、それ以外ではundefinedになります。
ページのアドレス
ハイライトする語句（または長い文章の冒頭）
文章の末尾（任意）
直前の語句（任意）
直後の語句（任意）
作成されたリンク
新しいタブでリンクを開く
https://で始まる完全なアドレスを入力してください
ハイライトする語句を入力してください。
無料で始める · クレジットカード不要