Scroll to text fragment

概要

テキストフラグメント (#:~:text=) はURLのフラグメントでページ内のテキストを指定し、自動スクロール・ハイライト表示を行います。

対応ブラウザ

基本構文

<!-- URLにテキストフラグメントを指定 -->
<a href="https://example.com/page#:~:text=重要なテキスト">
  該当テキストへ直接リンク
</a>
<!-- 範囲指定も可能 -->
<!-- #:~:text=開始テキスト,終了テキスト -->

実務での使いどころ

• Scroll to text fragment の活用

  テキストフラグメントへのスクロール。URLでページ内テキストを指定してハイライト表示。

注意点

アクセシビリティ

• スクリーンリーダーでの読み上げを確認すること。

参考リンク

• MDN Web Docs — Scroll to text fragment
• Can I use — Scroll to text fragment