Newly available 主要ブラウザで対応済みだが、古いバージョンでは未対応の場合がある。

Scroll to text fragment

Experimental: これは実験的な機能です。

本番で使用する前にブラウザー互換性一覧表をチェックしてください。

fragmentDirective は Document インターフェイスの読み取り専用プロパティで、現在の文書の FragmentDirective を返します。

その他

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
FragmentDirective
81
83
131
18.4
81
18.4
HTML 属性
text_fragments

URLのテキスト断片
80
80
131
16.1
80
16.1
DOM API
fragmentDirective

fragmentDirective は Document インターフェイスの読み取り専用プロパティで、現在の文書の FragmentDirective を返します。
86
86
131
18.4
86
18.4
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

HTML 
<!-- URLにテキストフラグメントを指定 -->
<a href="https://example.com/page#:~:text=重要なテキスト">
  Direct link to the relevant text
</a>
<!-- 範囲指定も可能 -->
<!-- #:~:text=開始テキスト,終了テキスト -->

ライブデモ

Fragment format

Show the URL fragment syntax used to target visible text in a document.

プレビュー全画面表示

Why it is useful

Explain how deep links can focus readers on a relevant sentence or paragraph.

プレビュー全画面表示

Use with care

Text fragment links depend on page text staying stable over time.

プレビュー全画面表示

実務での使いどころ

  • Scroll to text fragment の活用

    Experimental: これは実験的な機能です。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

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

参考リンク