コンテンツにスキップ
tah5.com
ブログ

テキストフラグメント

参考: https://developer.mozilla.org/ja/docs/Web/URI/Fragment/Text_fragments

テキストフラグメントは、URL フラグメントの特定の構文を使用することにより、作成者が ID で注釈を付けなくても、ウェブ文書内のテキストの特定の部分に直接リンクできるようにするものです。

構文

1
https://example.com#:~:text=[prefix-,]textStart[,textEnd][,-suffix]

検証用

  1. #:~:text=テキストフラグメントは、（単純なテキスト指定）
  2. #:~:text=作成者&text=特定（複数のテキスト指定）
  3. #:~:text=テキストフラグメントは、,するものです。（範囲指定）
  4. #:~:text=全角%E3%80%80の%E3%80%80空白%E3%80%80は%E3%80%80大きいね。（全角スペースを含むテキストをURLエンコードして指定）
  5. #:~:text=半角%20の%20空白%20は%20小さいね。（半角スペースをエンコード）
  6. #:~:text=^^^^-,Copy（接頭辞を使用して指定）
  7. #:~:text=私は-,「,」,-を完全に理解（接頭辞と接尾辞を使用）
  8. #:~:text=Change%20Color（cssで選択時のスタイル変更）
  9. #:~:text=Change%20Color%202（cssの別バージョン）

テキスト

全角　の　空白　は　大きいね。

半角 の 空白 は 小さいね。

Prefix Suffix

Copy^^^^Copy^^^^and^^^^Paste^^^^

私は「正規表現」を完全に理解した。

Change Color

div

check → Change Color 2

1
<div class="chcr">
2
  <style>
3
    .chcr ::target-text {
4
      background-color: red;
5
      color: blue;
6
    }
7
  </style>
8
  <p>Change Color</p>
9
</div>
10


11
<div class="chcr-target-only" style="padding: 1rem;background-color: #dedede44">
12
  <style>
13
    .chcr-target-only :target {
14
      background-color: red;
15
      color: blue;
16
      text-align: center;
17
    }
18
    .chcr-target-only p {
19
      padding: 1rem;
20
      background-color: #fafafa;
21
      color: black;
22
    }
23
  </style>
24
  div
25
  <p>check → Change Color 2</p>
26
</div>
Tags: