コンテンツにスキップ
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>

YOASOBI 「UNDEAD」に似てる曲

YOASOBI 「UNDEAD」の、「Past & Future can’t change the Past」 「Past & Future run for the Future」 の部分が、どこかで聞いた曲に似てると思っていましたが、The No No Square Songでした。

スッキリした…

パスワード生成

  • 8 文字のパスワードを 2 つ生成（例: jaetoa9H OoC2phip）

    コマンド: pwgen 8 2

  • 大文字、数字、特殊文字を含む、33 文字のパスワードを 1 つ生成（例: Fohm>VB{j5mr+l,x!v<_!n;Nt<sm_@NIp）

    コマンド: pwgen --capitalize --numerals --symbols --secure 33 1